¿Cómo y cuándo debes usar animación en tu aplicación?

Piensa en causa y efecto. Si paso el mouse sobre un botón, me gustaría recibir algún tipo de comentarios. Si puedo arrastrar algo, indícalo de alguna manera. Si hay una alerta o notificación, llame mi atención discretamente. Más allá de eso, a menos que tenga una razón muy específica para la animación, no use una. Intenta evitar cualquier cosa que pueda ser molesta si continúa. Si la animación no es importante y distrae del objetivo principal de la página, elimínela.

Algunos lugares donde la animación puede ser apropiada:

• Minimizar un panel a una ubicación específica: la animación ayuda a enseñar al usuario a dónde se fue el panel minimizado y cómo restaurarlo.
• Material de ocultación automática, por ejemplo, una barra de navegación: la animación atrae la atención del usuario de que algo simplemente desapareció y de dónde se puede recuperar.
• Actualización de un área que no está inmediatamente cerca del área donde ocurrió el cambio que lo ha causado. Por ejemplo, editar datos en una lista/cuadrícula que cambia la representación visual de esos datos en otro panel.

La animación (cambio/movimiento) llama la atención más que la mayoría de las otras cosas, por lo que es genial cuando desea llamar la atención sobre una acción que, de lo contrario, podría haber desviado la atención del usuario.

Sin embargo, incluso para los elementos anteriores, puede valer la pena hacerlo solo las primeras veces, ya que el ojo se ve atraído automáticamente hacia él, sirve como una distracción y, por lo tanto, debe evitarse después de que se haya completado la "guía" inicial. .

Siempre debe tener algún tipo de animación de ocupado/trabajo para evitar que su usuario piense que la aplicación ha dejado de funcionar (especialmente importante para las aplicaciones ajax).

Las transiciones rápidas simples están bien si se suman a la experiencia general del usuario, pero no ponen demasiado.

¿Alguna vez ha usado una aplicación en la que pensó que "desearía que el desarrollador hubiera dedicado tanto tiempo a la planificación de las características reales como a la planificación de los geniales efectos de interfaz de usuario"? Tenga esto en cuenta cuando agregue animaciones.

Gran pregunta. Como de costumbre, depende de la aplicación (los juegos probablemente deberían usar mucha más animación de interfaz de usuario que las aplicaciones de productividad, por ejemplo), pero hay algunos principios generales.

Cuando los iThings eran nuevos y populares, todo tenía que ser animado, pero es interesante mirar VS2010 y Office 2010 y ver cuánto es ¡no animado. En particular, en Office 2010 desvanecimiento gradual/desplazamiento del botón (mientras que Office 2007 lo hizo). OMI, se siente más receptivo. Los menús aún se desvanecen (aunque vale la pena señalar que los menús tardan aproximadamente el doble en desvanecerse ¡fuera como lo hacen para desvanecerse dentro, lo que puede aumentar la percepción sensibilidad).

En general, la animación debe usarse cuando los componentes de la IU se mueven sin que el usuario los arrastre/desplace explícitamente . Si el usuario arrastra un ícono a su lugar, "desplazar" otros íconos del camino transmite los efectos de la acción del usuario (aunque a veces una línea de punto de inserción es suficiente). La "barra de información" en IE/Firefox empuja otras cosas hacia abajo para reducir la agitación y atraer la atención del usuario. Los menús de acordeón y árbol se han probado mejor con la animación, ya que el usuario ve a dónde van los otros elementos.

Una vez vi un estudio que mostró que los usuarios de todos los niveles están menos inclinados a interactuar con un elemento de la interfaz de usuario que está animando (si encuentro el enlace lo actualizaré). Por lo tanto, si enciende un botón durante 2 segundos cuando el usuario se desplaza sobre él, incluso si el botón ¡funciona durante la animación, los usuarios esperarán inconscientemente a que termine la animación. Para tener una idea de esto, consulte la muestra Temas de WPF . Algunos temas tienen animaciones de desplazamiento más largas que otros, y puede determinar de inmediato cuáles se sienten lentos. Los efectos de desvanecimiento lento también pueden haber contribuido a que los usuarios digan que Vista se sintió lento: en Win7, todas las mismas animaciones están ahí (por lo que es igual de lento en el procesador/tarjeta gráfica), pero muchas son más cortas.

OTOH, el nuevo google.com presenta cosas que se desvanecen, y la búsqueda de imágenes de google ahora presenta cajas de luz. Entonces la tendencia va en ambos sentidos.

Para resumir, las animaciones tienen dos efectos fuertes en el cerebro que puedes usar:

• Reduce la carga cognitiva: Permiten al usuario ver lo que sucedió entre dos estados, por lo que su cerebro no tiene que "llenar el vacío". Esto hace que el usuario sienta que todo es más claro y fácil de usar --> Haga un uso extenso de animaciones para transiciones (cf Apple software)

• Capta la atención del usuario: Los humanos son realmente buenos para detectar movimiento en un lugar que no están mirando directamente. Esto se hace gracias a nuestras células de la barra , las células utilizadas para detectar el movimiento, que son realmente densas en los bordes exteriores de la retina (deben tener algo que ver con la supervivencia en un entorno hostil) -> Usa animación si algo realmente importante sucedió en un lugar distante.

Este efecto es muy fuerte porque están directamente conectados a nuestro cerebro reptiliano. Potente y peligroso al mismo tiempo.

Cuando hago animaciones para una aplicación web/nativa, siempre adopto el enfoque github, de casi "distraer al usuario" durante medio segundo, mientras se carga el contenido. Encuentra las partes más lentas de la aplicación (especialmente las partes donde presionas un botón y durante un buen medio segundo, parece que no pasa nada, y encuentra alguna forma de hacer una animación, esto es para minimizar la frustración del usuario (" Presioné el botón pero no sucede nada "), tenga en cuenta que no me refiero a una rueda de carga giratoria, o algún tipo de animación de carga, me refiero a una animación deslizante o algo por el estilo, para crear la ilusión de una mancha , interfaz de usuario rápida, (ver: https://github.com/github/linguist cada vez que haces clic en algo hay una animación de diapositiva que hace que github parezca súper rápido y suave), ten en cuenta que no exageres esto (usando esta técnica en partes de sus aplicaciones que toman> 500 ms) Siento que 500 ms, es el número mágico, pero experimente y encuentre el suyo.

Tienes que preguntar: ¿esta animación ayuda al usuario a descubrir qué está pasando? Desactivé el efecto genio de OS X de inmediato, pero aprecio la animación simple de minimizar/restaurar porque es rápida y da una pista adicional de lo que acaba de suceder. Asimismo con Espacios/Exposé. O tal vez es una transición de desvanecimiento breve, simple y suave que hace que algo parezca menos abrupto y más humano.

Por otra parte, un poco de estilo puede ser su marca registrada, como el 'Lucas wipe' de Star Wars.

La animación tiene un propósito, y ese propósito es visualizar cambios en el estado.

Es más fácil asimilar cuando piensas en la animación declarativa, como el tipo presente en CSS moderno presentado por webkit. En este contexto, especifica cómo se ven los elementos en un determinado estado y luego le dice a CSS cómo se ven en un estado diferente. ¿Cómo se especifican los estados? Con reglas CSS, como nombres de clase e id. Entonces, por ejemplo (¡y perdóname por usar el código aquí!):

.myBox { width: 100px; height: 100px; border: solid 1px red; -webkit-transition: linear .3s; }
.myBox.open { width: 100px; height: 120px; border: solid 3px red; }

Lo que estamos describiendo aquí es un cuadro que se abre, y le estamos diciendo al código cómo animar entre las dos reglas CSS. Esto los convierte en estados, y cuando te das cuenta de eso, aplicar animación a tu aplicación de repente se vuelve mucho más lógico. En lugar de pensar en términos de qué animación va a dónde, estás viendo la animación como un subproducto de los cambios de estado; un indicador de que algo ha sucedido o comentarios al usuario de que se está produciendo un cambio.

Cuando aprendí a diferenciar entre "animación" pura (desde un punto de vista de programación) y "cambio de estado" (desde un punto de vista declarativo), hizo que todos mis diseños de IU fueran mucho más sólidos y lógicos.