Algunas veces es difícil para el usuario saber donde mirar o comprender como un elemento se desplaza desde el punto A hacia el punto B. Una transición cuidada puede guiar efectivamente la atención del usuario y el enfoque a través de varios pasos de un proceso o procedimiento, evitando la confusión cuando la disposición cambia o los elementos son re-ordenados además de mejorar, sobretodo, la belleza de la experiencia. El diseño del movimiento debería servir para un propósito funcional.
Continuidad visual
Las transiciones entre dos estados visuales deberían ser claras, suaves y fáciles de comprender para evitar que el usuario se confunda. Una transición bien diseñada hace el trabajo pesado y permite al usuario comprender claramente donde debería enfocarse su atención. Las transiciones tienen tres categorías de elementos:
- Elementos entrantes – los que se generan o trasladan dentro de la escena, esos elementos necesitan ser introducidos o restablecidos.
- Elementos salientes – los que ya no son relevantes dentro un nuevo contexto deben ser eliminados de la escena de un modo apropiado.
- Elementos compartidos – los que persisten al principio y al final de las transiciones. Pueden ser elementos sutiles de la escena como un icono pero llegar a ser elementos dominantes de la escena como una imagen de una galería que crece hasta encajar en la pantalla.
Relacionado
Consideraciones
Cuando diseñes las animaciones de las transiciones, considera lo siguiente:
- Piensa acerca de como la atención del usuario sera dirigida. ¿Los elementos y movimientos ayudan a dicho objetivo? ¿Como deberían ser los elementos entrantes, salientes y compartidos, con o sin énfasis a través de las transiciones?
- Considera las transiciones cuando estés diseñando las pantallas para encontrar oportunidades de crear conexiones visuales entre los estados de transición a través de colores y elementos persistentes.
- Añade movimientos con prudencia: reflexiona acerca de como mover un cierto elemento para añadir claridad y alegría a las transiciones.
Usa las capas donde sea apropiado. En general, los elementos de papel entrantes deben deslizarse dentro de la vista, pero los elementos de tinta no, estos deberían aparecer o desvanecerse suavemente. Los fundidos cruzados en la pantalla completa no son preferidos, es preferible usar recortes.
Los cortes en seco generan discordia y requieren al usuario que haga todo el trabajo para comprender la transición.
Sincronización jerárquica
Cuando crees transiciones, considera el orden y la sincronización del movimiento de los objetos. Asegúrate de que el movimiento ayuda a jerarquía de la información, transmitiendo que contenido es el más importante creando un camino que el ojo debe seguir.
Sin embargo, no es una fórmula simple en la cual los elementos importantes se mueven primero y los menos importantes al final. Una sincronización de los elementos de las transiciones provoca que los movimientos sean suaves y evita la sensación de que parezcan desarticulados.
Usa movimientos de superposición para dirigir la atención del usuario.
La sincronización concurrente para todos los elementos no indican qué es importante y qué no. Si todos los elementos tienen la misma importancia, considera un movimiento de gran escala para introducirlos como un grupo.
Coreografía coherente
Cuando los elementos de las transiciones se mueven alrededor de la pantalla, tienen que comportarse de forma coordinada. Los elementos viajan a través unas trayectorias que deberían tener un sentido y orden. Los movimientos aleatorios crean distracciones.
Una app con una buena coreografía también proporciona momentos de enseñanza. Cuando los elementos de las transiciones son coordinados, el usuario está comprendiendo como la app funciona. Se “hacen uno” con la app; no se sienten desorientados por las animaciones.
Si.
Usa movimientos de superposición para dirigir la atención del usuario.
No.
No confundas a los usuarios con movimientos incoherentes o desordenados, y evite las direcciones aleatorias en los objetos que entran y salen.
Relacionado
Consideraciones
- Evita las trayectorias lineales, excepto cuando el movimiento está limitado en un eje y/o moviéndose hacia/desde un punto específico en relación a otros elementos.
- Asegúrate de que la dirección en la que se mueven los elementos es coherente con la transición que utilices. Evita movimientos conflictivos y trayectorias que se superpongan.
- Piénsalo detenidamente, ¿que se mueve y bajo qué? ¿y por qué?
- Si todos los elementos trazan sus trayectorias sobre la pantalla, ¿se vería todo bien y organizado? ¿Crea una clara imagen de donde mirar?
- Apoya las relaciones espaciales a través de movimientos uniformes de los elementos entrantes y salientes.
Puedes ver más información sobre Transiciones significativas en la página oficial de Google en inglés pulsando aquí.