Clase 11 Motion Avanzando

Vista previa del material en texto

MOTION AVANZADO
INTERFAZ DE USUARIO
 Clase 11. CURSO UX-UI AVANZADO
Obligatoria siempre
RECUERDA PONER A GRABAR LA CLASE
Colocar todas las clases
LO MÁS RELEVANTE DE LA CLASE 10
Affordance: Affordance es una propiedad o característica de un objeto que presenta un aviso sobre lo que se puede hacer con este objeto. En resumen, las prestaciones son señales que dan una pista de cómo los usuarios pueden interactuar con algo, ya sea físico o digital.
GLOSARIO:
Clase 10
Sistema de diseño: Un Design System tiene como objetivo aportar un lenguaje común entre las diferentes profesiones y equipos de uno o más productos. Centraliza y pone en perspectiva varios documentos construidos históricamente de forma independiente (brand book, biblioteca de componentes, código fuente, etc.).
Clase 12
Testeo remoto del prototipo
CRONOGRAMA DEL CURSO
Clase 10
Sistema de Diseño
Clase 11
Motion Avanzado
MÍNIMA IDENTIFICACIÓN VISUAL DE MARCA
COREOGRAFIA UI MOTION
REVISANDO EL PROYECTO
TESTEO REMOTO MODERADO
¿ARRANCAMOS?
Profundizar las microinteracciones encadenadas.
Profundizar las animaciones en el tiempo.
OBJETIVOS DE LA CLASE
MAPA DE CONCEPTOS
MAPA DE CONCEPTOS CLASE 11
Producto Digital
Elementos de UX
James Garrett
Estrategia
Requerimientos
Estructura
ITERAR
Esqueleto
Superficie
Herramientas
Mapeo
Explorar
Construcción
Testeo
MOTION 
EL OBJETIVO DE HOY ES EXPANDIR NUESTRO CONOCIMIENTO SOBRE MOTION Y PROBAR NUEVAS RELACIONES
Usar para los subtemas de un módulo.
MEJORAR LA EXPERIENCIA DEL AFFORDANCE
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios slides. No hay que usarla para todos los módulos.
La animación aplicada en las interfaces de usuario crea una fuerte conexión entre el mundo físico y virtual. En la mayoría de los casos, imita la interacción con cosas reales: tirar, empujar, deslizar, arrastrar, etc.
AFFORDANCE ANIMADO
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Notificación que aparece en el flujo de interacción en la aplicación. Le recuerda al usuario sobre limitaciones particulares. Su animación presenta pulsaciones y de esta manera atrae la atención del usuario hacia la advertencia importante.
Cuando el interruptor está encendido, cambia varios parámetros juntos: color de la pestaña, color de la palanca y la animación del sol activada. De esta manera, informa inmediatamente al usuario y también agrega un atractivo emocional a la operación.
Algunos ejemplos
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
MOTION Y PROGRAMACIÓN
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios slides. No hay que usarla para todos los módulos.
ESPECIFICACIONES DE UX MOTION PARA DISEÑO Y DESARROLLO
Primera clase
Los desarrolladores utilizan una variedad de bibliotecas de movimiento y animaciones CSS para implementar el movimiento. Por otro lado, nosotros los diseñadores solemos trabajar con programas como InVision Studio, Adobe After Effects y Framer.
A veces podemos utilizar las mismas bibliotecas que los desarrolladores, pero muchas sólo están destinadas a ellos.
BIBLIOTECAS DE
MOVIMIENTO Y ANIMACIONES
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Las especificaciones de movimiento facilitan la conversación entre los diseñadores y los programadores al proporcionar exactamente lo que un desarrollador necesita para implementar el movimiento que creó un diseñador. Facilitan el ajuste en cada iteración y brindan comentarios de una manera clara y concisa.
¿QUÉ SON LAS ESPECIFICACIONES?
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
2s
Estas cuatro especificaciones (elemento, transformación, duración y curva de movimiento) son la base de lo que los desarrolladores necesitan para implementar el movimiento UX.
Elemento
Transformación
Duración
Curva de Movimiento
Tiempo
Distancia
No va, es para guiar el uso del template.
VEAMOS CADA UNA DE ELLAS
Primera clase
Es la pieza que se animará. La propiedad (color, posición, opacidad) es parte de la especificación que identifica qué va a cambiar del item elemento.
Ej: cambio de color, la posición vertical o la opacidad. 
Elemento
Usar para slides de texto con imagen.
Punto de inicio: punto de inicio de la animación. Predeterminado = centro del elemento.
Tamaño: especificación de ancho y alto.
Color: transición del color 1 al color 2.
Otros
Elementos: parámetros
Usar para slides de texto con imagen.
Las transformaciones de movimiento estándar incluyen mover, fundir, escalar y rotar. Los desarrolladores necesitan los detalles de qué transformación y cuál es el cambio. Por ejemplo: desvanecerse a negro, rotar 360 grados, mover 300px a la izquierda o escalar al 100%.
Transformación
Usar para slides de texto con imagen.
Opacidad: de 0% a 100%.
Traslación: posición relativa o absoluta del elemento con coordenadas X e Y.
(Atención: si el elemento no se mueve linealmente, se debe proporcionar información adicional, por ejemplo, guión gráfico)
Rotación: número de grados desde el punto de rotación
Activador: OnClick, Hover, Posición de desplazamiento...
Transformación: parámetros
Usar para slides de texto con imagen.
Traslación: cambio de la posición de la vista en el eje X o Y
Escala: cambiar la escala del ancho, alto o ambos de los objetos
Rotación: objeto giratorio alrededor del eje X, Y e incluso Z
Transformación: parámetros
Usar para slides de texto con imagen.
Cuando los objetos en movimiento transforman su tamaño de manera desproporcionada, deben moverse a lo largo del arco en lugar de en línea recta. 
Esto ayuda a que el movimiento sea más natural. 
El cambio de altura y ancho del objeto por aumento/disminución se realiza de forma asimétrica, es decir con diferente velocidad. 
Por ejemplo: una carta cuadrada se convierte en un rectángulo.
Transformación Asimétrica
Usar para slides de texto con imagen.
El movimiento a lo largo de la línea se utiliza cuando el objeto cambia su tamaño proporcionalmente. 
Dado que la implementación de tal movimiento es mucho más fácil, a menudo se descuida la regla del movimiento de arco desproporcionado. 
Si observamos los ejemplos reales de aplicaciones, veremos el dominio del movimiento lineal.
Tranformación Simetrica
Usar para slides de texto con imagen.
Un retraso es una especificación de tiempo adicional que es muy importante si tienes varias animaciones sucediendo a la vez. Lo más probable es que una comience después de la otra, y el retraso entre ellas es algo que los desarrolladores deben tener en cuenta. Comienza con el orden de las animaciones y usa una “coreografía” para determinar los retrasos.
Duración
2s
Usar para slides de texto con imagen.
100ms a 200 ms: involucran elementos más pequeños o pequeñas cantidades de cambios. Hover, fading, scaling.
200 ms: a 500 ms: movimientos más grandes que cubren una gran cantidad de espacio de la interfaz. También utilizado para movimientos complejos.
Duración: parámetros
Usar para slides de texto con imagen.
La velocidad óptima para la animación de la interfaz está entre 200 y 500 ms.
Usar para slides de texto con imagen.
El tamaño de los dispositivos móviles afecta la duración de la animación.
De 400 a 450ms
De 200 a 300ms
De 150 a 200ms
Usar para slides de texto con imagen.
El tamaño de los dispositivos móviles afecta la duración de la animación.
De 150 a 200ms
Usar para slides de texto con imagen.
Cada aparición del nuevo elemento debe durar de 20 a 25 ms.
Usar para slides de texto con imagen.
Existe una relación entre la distancia a recorrer y la duración.Usar para slides de texto con imagen.
Las curvas de movimiento determinan la velocidad a la que se mueven los elementos, que generalmente cambia con el tiempo. Un objeto puede comenzar a moverse lentamente y luego a acelerarse, o viceversa. Hay muchos tipos diferentes de curvas de movimiento y, en general, pueden hacer que los movimientos se sientan más naturales que un elemento que se mueve por una página a la misma velocidad.
Curva de Movimiento
Tiempo
Distancia
Usar para slides de texto con imagen.
Posición o Distancia: Los objetos se trasladan a través de una escena.
Tiempo: Existe una duración adecuada a la distancia que recorren.
Curva de movimiento: parámetros
Usar para slides de texto con imagen.
Los objetos que no se ven afectados por ninguna fuerza física se mueven linealmente, es decir, con velocidad constante. Y solo por este hecho, parecen muy poco naturales y artificiales para el ojo humano. El movimiento lineal se puede utilizar, por ejemplo, solo cuando el objeto cambia de color o transparencia. En términos generales, podemos usarlo para los estados cuando un objeto no cambia de posición.
MOVIMIENTO LINEAL
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Movimiento Lineal
La curva muestra cómo (y axis)cambia la posición del objeto durante los mismos intervalos de tiempo (x axis). En el caso actual, el movimiento es lineal, por lo que el objeto recorre la misma distancia al mismo tiempo.
Podemos ver en la curva que al principio la posición del objeto cambia lentamente y la velocidad aumenta gradualmente. Eso significa que el objeto se mueve con cierta aceleración. 
Esta curva debe usarse cuando los objetos salen volando de la pantalla a toda velocidad. Pueden ser notificaciones del sistema o simplemente tarjetas de la interfaz. Pero hay que tener en cuenta que este tipo de curva sólo debe utilizarse cuando los objetos abandonen la pantalla para siempre.
CURVA DE ACELERACIÓN (EASE-IN)
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Curva de Aceleración (Ease-in)
Misma duración, misma distancia con pequeños cambios en la curva
Esta es la opuesta a la curva ease-in, por lo que el objeto cubre rápidamente una gran distancia y luego reduce lentamente la velocidad hasta que finalmente se detiene. Este tipo de curva debe usarse cuando el elemento emerge en la pantalla: vuela hacia arriba en la pantalla a toda velocidad, disminuye gradualmente hasta que se detiene por completo. Esto también se puede aplicar a diferentes tarjetas u objetos que aparecen desde el exterior de la pantalla.
CURVA DE DESACELERACIÓN (EASE-OUT)
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Curva de Desaceleración (Ease-out)
CURVA ESTÁNDAR (EASE-IN-OUT)
Esta curva hace que los objetos ganen velocidad al principio y luego la bajen lentamente a cero. Ese tipo de movimiento es el más utilizado en la animación de la interfaz. Siempre que tengan dudas sobre qué tipo de movimiento utilizar en su animación, utilicen la curva estándar. 
Se utiliza cuando los objetos se mueven de una parte de la pantalla a otra. En tal caso, la animación evita el efecto llamativo y dramático.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
La animación inicial no es igual a la animación final.
LA FUNCIÓN CUBIC-BEZIER
Primera clase
Diferentes tipos de curvas y sus parámetros para la función cubic-bezier.
Se utiliza una función para describir las curvas. Se llama “cúbico” porque se basa en cuatro puntos. Veámoslo basándonos en el gráfico anterior:
El primer punto con coordenadas 0;0 (abajo a la izquierda, puntos celestes) y el último con coordenadas 1;1 (arriba a la derecha, puntos verdes) ya están definidos en el gráfico. 
A partir de lo anterior, necesitamos describir solo dos puntos en el gráfico, que están dados por cuatro argumentos de la función cubic-bezier(): los dos primeros son las coordenadas xy del primer punto, y los otros dos son las coordenadas xy del segundo punto.
¿QUÉ ES?
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
iOS y Android proporcionan varias curvas de aceleración predefinidas que ayudarán a los desarrolladores a implementar la animación solicitada más rápido. Si tienen curiosidad por saber qué curvas puede usar rápidamente, encontrarán información adicional para Material Design e iOS
IOS Y ANDROID
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Para simplificar su trabajo con curvas y el diálogo con los programadores, es sugerible utilizar el sitio cubic-bezier.com - easings.net. El mismo les da la posibilidad de jugar con diferentes parámetros de la curva y ver inmediatamente cómo se mueven los objetos y elegir cual usar en nuestro prototipo.
DIÁLOGO DISEÑADOR-PROGRAMADOR
NOTA: Si bien hay muchas notas de lenguaje de programación, nos interesa observar ejemplos de cómo se verán nuestras animaciones. 
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
¿CÓMO PUEDO VISUALIZAR ESTAS ESPECIFICACIONES?
Primera clase
Proporcionar una tabla de especificaciones de movimiento general ayuda a visualizar qué sucederá y cuándo. Este método funciona particularmente bien para ayudar a visualizar la coreografía como referencia. Esto debe ir acompañado de un video o un prototipo interactivo de cómo se ve la animación.
Coreografía General
Usar para slides de texto con imagen.
Igual: Significa que la apariencia de todos los objetivos obedece a una regla en particular.
Dirección: flujo que guía la atención del usuario en una dirección (ej: de arriba hacia abajo).
Diagonal: reducir el tiempo de carga de cada elemento.
Subordinada: Significa todos los los elementos están subordinados a uno que llama la atención.
Tipos de coreografías
Usar para slides de texto con imagen.
¿CÓMO LEERLO?
Primera clase
Usar para slides de texto con imagen.
Usar para slides de texto con imagen.
El eje X del gráfico es un tiempo en milisegundos. El eje Y presenta los elementos de animación en secuencias. Gracias a esto, cada animación mostrará fácilmente su duración. 
Eje “X” y Eje “Y”
Usar para slides de texto con imagen.
Para mejorar la visualización se puede mostrar la curva que se genera. Esto dependerá de lo que se quiera lograr con la animación.
Curva de movimiento
Usar para slides de texto con imagen.
El nombre que recibirá cada elemento depende del lenguaje que se esté usando para programar y realizar las animaciones. En este caso usaremos las propias del programa de prototipado. 
Nomenclatura
Usar para slides de texto con imagen.
Cada lenguaje tiene su propia nomenclatura para nombrar las curvas.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Cada elemento tiene una serie de parámetros que podemos modificar y manipular. Esto lo podemos representar con diferentes colores para mejorar la visualización.
Color de los parámetros
Usar para slides de texto con imagen.
La apariencia de todas las tarjetas se percibe como un flujo que guía la atención del usuario en una dirección, es decir, de arriba hacia abajo. Si no seguimos el orden, la atención del usuario se dispersará. La apariencia de todos los elementos a la vez también se vería mal.
IGUAL INTERACCIÓN - DIRECCIÓN
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
La atención delusuario debe guiarse en una dirección fluida
Usar para slides de texto con imagen.
El enfoque del usuario debe dirigirse en diagonal, por lo que mostrar los elementos uno por uno es una mala idea, ya que hará que la animación sea excesivamente larga y la atención del usuario será como un zigzag, lo cual está mal.
IGUAL INTERACCIÓN - DIAGONAL
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Aspecto diagonal para la vista tabular de tarjetas
Usar para slides de texto con imagen.
La interacción subordinada significa que tenemos un objeto central que atrae la atención de todos los usuarios, y todos los demás elementos están subordinados a él. Este tipo de animación da la sensación de orden y llama más la atención sobre el contenido principal.
En otros casos, sería muy difícil para el usuario saber qué objeto seguir, por lo que su atención se dispersaría. Por lo tanto, si tienes varios elementos que deseas animar, debes definir claramente la secuencia de su movimiento y animar la menor cantidad posible de objetos a la vez.
INTERACCIÓN SUBORDINADA
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Vale la pena animar solo un objeto central y todos los demás sometidos a él.
De lo contrario, un usuario no sabría qué objeto seguir.
Usar para slides de texto con imagen.
TAMBIÉN PODEMOS PRESENTARLO CON SU ANIMACIÓN
Usar para slides de texto con imagen.
Usar para slides de texto con imagen.
VEAMOS UN EJEMPLO
Duración
Coreografia Vertical
Coreografia Horizontal
Elementos Entrantes
Elementos Salientes
Garantiza que los desarrolladores implementen el movimiento con precisión
Las especificaciones admiten la comunicación
Previenen errores y los detectan
Ayuda a crear un sistema de diseño de movimiento consistente
Agilizan el proceso al presentar todo en un solo gráfico.
BENEFICIOS
¡PARA PENSAR!
Del 1 al 5, donde 5 es “muy satisfactoria” y 1 es “mejor olvidarla”, ¿Cuál fue tu experiencia dialogando con programadores?
A LA ENCUESTA DE ZOOM
Encuesta de zoom para que los estudiantes respondan.
OPCIONES:
5
4
3
2
1
Hacer un cierre en relación a las respuestas.
☕ BREAK
¡5/10 MINUTOS Y VOLVEMOS!
REVISIÓN DEL PROYECTO
Chequeo General
 TIEMPO: 1 HORA
REVISIÓN DEL PROYECTO
ORGANIZACIÓN
Consigna: Cada tutor coordinará la sala con sus estudiantes. El objetivo es revisar el prototipo, teniendo presente la propuesta de solución elegida para tu rediseño, bajo los siguientes parámetros:
Inconvenientes con la fidelidad de contenido del prototipo (UX Writing) 
Inconvenientes con la fidelidad visual del prototipo (MIV). 
Inconvenientes con la fidelidad de funcionalidad del prototipo (Transiciones) 
REVISIÓN DEL PROYECTO
FEEDBACK
Algunas preguntas | Fidelidad Visual:
¿Incorporo un onboarding al comienzo? 
¿Tengo definido al menos tres niveles de jerarquias tipograficas? 
¿El concepto de marca es claro en la propuesta visual? 
¿Es coherente el estilo de imágenes, el código cromático y el tipo de iconografía a utilizar? 
¿La propuesta visual tiene coherencia con la propuesta de contenidos? 
¿Tengo definido sobre qué elemento gráfico se centrará mi propuesta y qué estructura y estilo predominará?
Algunas preguntas | Fidelidad de Contenidos:
¿Utilizo palabras difíciles? 
¿Utilizo bloques largos de textos? 
¿Soy consistente en los textos usados? 
¿Uso verbos específicos, en su forma simple y en voz activa en botones, notificaciones, alertas, etc? 
¿Uso mayúsculas para textos?
REVISIÓN DEL PROYECTO
FEEDBACK
Algunas preguntas | Fidelidad de Funcionalidad:
¿Están conectados todos los frames? 
¿Se puede recorrer la funcionalidad principal sin inconvenientes?
REVISIÓN DEL PROYECTO
FEEDBACK
COREOGRAFIA UI MOTION
Presentar al menos dos coreografías subordinadas y una lineal en formato linea del tiempo que correspondan a la solución del rediseño de tu producto digital.
9
	COREOGRAFIA UI MOTION		
	Formato: Archivo en tipo .ppt o .doc con el desarrollo de la actividad. Generar un archivo con el nombre “CoreografiaUiMotion+Apellido”. También se puede entregar en Google Slides o Docs.
Sugerencia: activar comentarios en el archivo (si es Google Slides/Docs)		
	
>> Consigna: Presentar al menos dos coreografías subordinadas y 1 lineal en formato linea del tiempo que correspondan a la solución del rediseño de tu producto digital. Estas coreografías pueden ser presentadas con los wireframes (no es necesario que contengan los elementos de interfaz).
Aspectos a incluir en el entregable:
La línea del tiempo marcando los ms correspondientes al dispositivo (desktop o tablet o dispositivo móvil).
Identificar el “disparador” que inicia la coreografía.
Identificar claramente qué sucede con el elemento, cuáles serán sus transformaciones, qué parametros se verán afectados, que duración tendrá y cuál será su curva de movimiento.		
¿QUIERES SABER MÁS? TE DEJAMOS MATERIAL AMPLIADO DE LA CLASE
Portada de Material Ampliado
Designing Interface Animation | Val Head
The ultimate guide to proper use of animation in UX | Taras Skytskyi
¿PREGUNTAS?
Obligatoria siempre.
¡MUCHAS GRACIAS!
Resumen de lo visto en clase hoy:
Microinteracciones encadenadas.
Animaciones en el tiempo.
Obligatoria siempre. Completar el resumen con palabras claves de lo visto.
OPINA Y VALORA ESTA CLASE
Obligatoria siempre.