Cada vez que saco dinero de un cajero y me toca ese que te devuelve la tarjeta lentamente, a empujones, pienso en lo importante que es el movimiento cuando estamos delante de una máquina.
El movimiento es algo tan importante como la interacción, forma parte de ella. En función de ese movimiento detectamos si lo que tenemos delante está enfocado como es debido o tiene su capa de caspa, definido a medias. Pero a este detalle se le ha dado muy poca importancia tiempos atrás: hasta hace poco las transiciones en todo lo relacionado con la tecnología estaban basadas en un evento muy sencillo como era el clic del ratón. Las transiciones basadas en Ajax nos hicieron pensar un poco más sobre estos detalles, pero no lo suficiente.
Hoy esto está cambiando a toda velocidad y parece que viene para quedarse. Ahora la interacción con un dispositivo electrónico se basa cada vez más en transiciones, muy visuales, llenas de significado. ¿Nunca te has topado con una app móvil donde al hacer tap sobre el botón «volver» la pantalla sale del lado contrario de donde esperas que salga? Yo sí, y es algo molesto e incómodo, hasta que no lo ves varias veces no sabes que el problema es ese, pero hay algo ahí que el usuario nota que no está bien, se intuye.
Diseñar esas transiciones no es una tarea fácil, al diseñador de interacción se le queda grande (aunque, como siempre, puede dar pistas), ya que ni siquiera los programas que utilizamos para prototipar se prestan a ello. El vídeo se torna la herramienta más eficaz para poder explicar como es debido estas transiciones y el profesional que se dedica a esto parece que ya tiene título profesional: motion designer.
He tenido la oportunidad de trabajar con algunos fuera de España y la verdad es que el valor que aportan al proyecto, casi siempre en la parte final del mismo, es valiosísimo. El cliente entiende a la primera de qué va el nuevo producto sin tener que pelearse con pantallas estáticas: si a eso le añades música y comentarios el entregable crece en calidad de forma exponencial.
En nuestro país he visto a pocos que se dediquen a estos menesteres, pero si hay alguien ahí con inquietudes y ganas que se pase por los comentarios.
La imagen que ilustra el post pertenece a la peli Mr & Mrs Smith, y es obra de Marc Coleran, que se dedica a estos menesteres.
Actualización: Ale Muñoz aporta más detalles al respecto en su blog. Merecida lectura: Diseño y Movimiento.
14 respuestas
¡Totalmente de acuerdo! Tanto en que es un aspecto vital como en que tenemos ahí un área de mejora importante.
Nosotros prototipamos actualmente con SketchFlow que te permite prototipar en baja y, a la vez, generar un entregable vivo con todas esas transiciones de las que hablas.
Muchas veces, cuando los pruebas, ayuda a tomar conciencia real de lo importante que es el sentir (por encima del leer) y de cómo décimas de segundo marcan una experiencia diferente.
Y, sobre el tiempo…una vez le coges el truco prototipas tan rápido como con cualquier otra herramienta.
Gracias a todos por vuestros comentarios.
@Sergio, creo que estamos hablando de cosas diferentes, cuando hablas de SkechFlow al final te quedas en lo que comento en el post: la interacción de ese entregable se genera sólo a través de clicks.
Yo hablo de una vuelta más de tuerca, que nada tiene ver con hacer click con un ratón, por mucho SketchFlow o Axxure que se utilice 🙂
Totalmente de acuerdo. Yo le llamo «direccionalidad», o sea, la cualidad de una interfaz de situar unas cosas a izquierda/derecha/arriba/abajo/delante/detrás para decirte cosas. De eso se desprenden las transciones entre los ejes x, y y z.
Tengo una presentación sobre diseño para iPad donde contaba algunas de estas cosas:
http://www.slideshare.net/VostokDesign/diseno-ipadextendedenglish
Bueno, y luego tenemos unos productos para adelgazar que seguro que le inter….
Gracias Javi.
Eso es, cada vez es más necesaria esa vuelta de tuerca extra para cerrar como es debido un producto tecnológico. Y no sólo estamos hablando de transiciones, aquí también juegan las vibraciones, la iluminación de la pantalla en casos puntuales para transmitir más feedback, etc… Hay un trabajo de atención al detalle tremendo.
Aaaahhh… las transiciones… amadas transiciones… Las apps no son nada sin ellas. Un pequeño detalle puede hacer de una app una chapuza o una gloria.Y ahí es de donde podemos cojear muchos diseñadores de interacción. Curioso nuestro nombre cuando nos falta ese aspecto tan importante de la interacción: la del movimiento.
Así que totalmente de acuerdo contigo: los motion designers tienen un papel importantísimo en el diseño de interfaces. Y parece que es hoy, al diseñar interfaces táctiles, cuando más les echamos en falta…
Un nuevo reto para seguir aprendiendo!
El tema es tremendamente importante y parece que se está trabajando muchísimo en ello. Las transiciones son fundamentales de cara al «feel» del look&feel.
Los equipos de UX de Mozilla, Chrome y Opera están trabajando duramente en ello y la verdad es que es una delicia ver las transiciones que definen para los eventos como abrir nueva pestaña, cerrar pestaña, reordenar, etc, todo un mundo (échale un vistazo al patrón de Chrome en la Canary Build que según el cursor se va desplazando por las tabs define un área circular iluminada en torno al puntero que da indicación de dónde se encuentra el foco, una gozada). Totalmente de acuerdo, la herramienta nos limita tremendamente a la hora de definir cómo tienen que ser las transiciones. No hay forma que tengamos de hacerlo excepto describiéndolo con palabras hasta que de alguna forma, los programas de prototipado incorporen alguna funcionalidad para hacerlo.
Nada, a ver cuanto tardamos en ver los primeros repositorios de patrones de interacción en vídeo definiendo la cinestesia, animaciones y transiciones de las aplicaciones 🙂
[…] post es un comentario extendido al que publica Juan Leal en su blog. Léelo para ponerte un poco en contexto del […]
Gracias por el post. Me ha servido para darme una autocolleja, rescatar un borrador de mi blog y volver a escribir. Aquí van mis comentarios.
😀
A mí me funciona muy bien cuando hago maquetas navegables tontas (sin funcionalidad por debajo) en Flash con las que el cliente juega. Cuando le ves con la media sonrisa en la presentación, sabes que le tienes en el bolsillo.
El problema es un poco el de siempre. Si ya tenemos que luchar para que nos den un par de días para hacer los protos en estático, imagínate pedir una semana para hacerlos en movimiento.
Muy de acuerdo.
Parte del problema viene de las limitaciones que las tecnologías con las que hemos lidiado. Esto ha permitido empezar en un campo limitado (más sencillo) y se ha desarrollado mucho la arquitectura de información, usabilidad, luego diseño de interacción,…
pero cada una de ellas se queda limitada para la siguiente evolución. Esta vez son las transiciones, el movimiento, las tabletas ¿Cuál será la siguiente?
Tu ejemplo inicial del cajero lo ilustra bien ¿estaremos preparados cuando haya que abandonar las pantallas y dar el salto al mundo de los objetos «reales»?
Por eso creo que es más importante manejar los conceptos fundamentales del diseño y no limitarnos con las recetas de cada disciplina de moda (creo que lo comentaba Javier en un twit hace poco)
Nada más, perdón por el rollo 😉
@seisdeagosto Hombre, al final la interacción se realiza con clics de ratón (o no) porque es el dispositivo de entrada que tenemos por defecto en este entorno. Pero es posible prototipar aplicaciones que se gestionen sin hacer un solo clic.
Con sketchflow es factible (vamos, que lo hacemos) prototipar sin depender de los clics del ratón.
El hacer que un elemento salte, se traslade de un lugar a otro, acelere, brille, rebote…todo eso y muchas de las cosas que contáis en los comentarios (animaciones, transiciones, el área circular de la Canary Build, contenidos que giran en 3d…) las hemos podido incorporar a prototipos navegables en baja.
Ahora, evidentemente siempre vas a tener que depender de los eventos que te genere un dispositivo de entrada. Echadle un ojo porque se pueden hacer muchas cosas, más de las que parece a priori.
[…] hablando de diseñar-cosas-no-de-diseño, este post de Juan Leal (Seisdeagosto) sobre el ¿diseño de moviemientos? Pues eso, que TODO hay que pensarlo antes de […]
Échales un vistazo que a buen seguro que te van a gustar
http://www.google.com/design/spec/animation/authentic-motion.html#authentic-motion-mass-weight
Llego un poco tarde al post, pero últimamente ando cada día más enamorado de las posibilidades que ofrecen herramientas como Quartz Composer, (con sus recientes incorporaciones varias como Origami, jQC o Avocado) o también el nuevo de RelativeWave «Form» (ahora impulsado por Google) o incluso si tiramos al código, Framer.js, que también es canela fina y está ayudando a definir muy buenos prototipos.
Lo bueno que veo en esto es que cada día nacen más y más interacciones desde un punto de vista «experimental», que ayudan a progresar y a definir nuevos conceptos de movimiento, sin la necesidad de presets preestablecidos impuestos por un determinado software. Y eso se quiera o no, ayuda a progresar y a crear nuevos patrones de interacción bastante sorprendentes…
Me gustan las cosas que está haciendo gente como Michaël Villar:
http://www.michaelvillar.com/motion
Y también los prototipos que se están definiendo con la salida de Form por ejemplo, este de David Lee me dejó bastante sorprendido…
https://www.youtube.com/watch?v=TZCZhpbyZ6g&src_vid=hOtm73iLb5M&feature=iv&annotation_id=annotation_596605933