Las animaciones se están utilizando cada vez más para mejorar la narración de un sitio, haciendo la experiencia más interactiva y entretenida.
Sin embargo, no se puede simplemente meter la animación en cualquier lugar. Considera cuidadosamente si se suma a elementos de la historia de tu sitio y la personalidad. Las animaciones pueden ser pensadas en términos de dos grupos:
1.- Animaciones a gran escala. Estas se utilizan como una herramienta de interacción primaria que tienen más impacto en los usuarios, e incluyen efectos como scroll parallax y notificaciones emergentes.
2.- Animaciones a pequeña escala. Estas incluyen los spinners, herramientas activables y barras de carga, y no requieren ninguna intervención del usuario.
Vamos a describir 7 de las técnicas de animación más populares:
Animaciones en carga
Estos se utilizan para entretener a los usuarios o de lo contrario será una experiencia tediosa. Animaciones en carga tienden a ser populares para los diseños planos, minimalistas, portafolios y landing pages.
Mantenlos simple y evita la adición de sonido. Sin embargo, deben coincidir con la personalidad y color de tu marca.
Navegación y menús (no desplazables)
Los menús ocultos de navegación se han vuelto cada vez más populares, especialmente cuando se busca ahorrar espacio en pantalla. Como se puede ver en el siguiente ejemplo, estas animaciones se usan para revelar un menú al hacer clic en un botón específico y evitar una transición hacia otra página.
Animaciones Hover
Ésta animación da una sensación más intuitiva a un sitio cuando los usuarios pasan el ratón sobre el contenido. Si los usuarios no están seguros acerca de una función o característica, sólo pasan el cursor sobre ellos y de forma automática les brindará una retroalimentación visual instantánea.
Galerías y presentaciones de diapositivas
Éstas son una forma efectiva de mostrar varias imágenes sin sobrecargar los usuarios. Son ideales para sitios de fotos, presentaciones de productos y portafolios.
Animación de movimiento
Nuestros ojos se dibujan naturalmente al movimiento, lo que la convierte en la herramienta perfecta para llamar la atención del usuario. La Animación de movimiento también puede ayudar con la jerarquía visual. Esto también brinda interés e integra a las formas, CTA y elementos de menú.
Desplazamiento
Ésta se basa en la animación y da más control al usuario, quien puede determinar el ritmo de cómo se desarrolla la animación.
Animaciones de fondo / vídeos
Un fondo animado simple puede añadir visibilidad a un sitio, pero debe usarse con moderación o puede ser muy molesto para el usuario. La clave es trabajar en secciones individuales o crear un movimiento suave de una imagen completa.
Ya vistas y explicadas las animaciones más populares, ¿cuál adaptarías a tu Sitio Web? Si deseas conocer más escríbenos y nuestros diseñadores gráficos estarán encantados de brindarte asesoramiento.
Quédate al pendiente de la tercera parte de las Tendencias de Diseño Web para el 2016: Micro interacciones.