Aunque en el diseño gráfico se utilizan conocimientos y conceptos que se pueden aplicar al diseño web como puede ser la teoría del color, pesos visuales, equilibrio, uso de tipografía, entre otros, el diseño web es distinto del diseño gráfico principalmente porque se aplica la animación e interactividad. Los usuarios tienen la oportunidad de interactuar con diversos elementos de la página.
La interactividad es uno de las grandes características del diseño web y su principal diferencia con el diseño gráfico. Al incluir elementos dinámicos y animados se añade una capa de interacción que solo es posible en las interfaces, se trate de un sitio web o aplicación.
Las animaciones son una herramienta poderosa en el diseño web y por lo tanto deben ser utilizadas sabiamente. En este artículo te mencionamos las características que posee toda gran interacción, para que las mantengas en mente al momento de añadir animaciones en tu sitio web.
Sutiles
La característica de una buena animación para elementos interactivos es la sutileza. Todos estos elementos se complementan con el diseño y estética del sitio web, así que en principio tus usuarios no notan las animaciones a un nivel consciente. Sin embargo, a nivel subconsciente sí que perciben estos cambios ligeros en botones, enlaces y demás.
Aplicar animaciones sutiles permite que todo el diseño del sitio se vea como una unidad y que estas interacciones capten la atención de los usuarios, pero que no lo distraigan de otros elementos que también debe estar observando. Es decir, permiten que el contenido siga siendo el elemento principal de tu sitio web, pero añaden esa interactividad que es necesaria en una interfaz web.
Fluidos
Las animaciones que decidas incluir en el sitio deben ser fluidas. De lo contrario, puede afectar la experiencia de usuario de tu interfaz. Los usuarios pueden no ser expertos en animación, pero notarán que el efecto no se ve natural. Y este pequeño detalle puede afectar el concepto que tienen de la marca y del sitio, sin mencionar que podría ser confuso para algunos.
Así que recuerda hacer que las animaciones luzcan fluidas. Podrían empezar de forma rápida e ir desacelerando con el tiempo o por el contario, podrían ser lentas y acelerar conforme se acerca al final. Aunque a menudo estas animaciones son cortas y sencillas, el usuario puede percibir estos cambios, así que configura adecuadamente el tipo de animación que quieres realizar, el tiempo y la velocidad apropiada para que ésta luzca natural.
Informativos
Aunque puede ser tentador añadir animaciones complejas a cada botón que posea tu sitio web, debes resistir este impulso. En la actualidad, con el uso de CSS y JavaScript se pueden lograr animaciones y efectos que no sólo lucen bien, sino que funcionan a la perfección. Pero, aunque las animaciones en elementos interactivos son importantes, no son la principal atracción de tu sitio web. En la página existen otros elementos que deben ser destacados, hay información que debe ser transmitida a los usuarios y todo el diseño facilita el envío de esta información a sus destinatarios.
Las animaciones son importantes en elementos con los que el usuario puede interactuar, pero no por el hecho de ser un regalo visual en la interfaz, sino porque tiene un propósito específico, como muchos otros elementos que forman parte de la composición. Las animaciones ofrecen información de forma visual a los usuarios y facilitan ciertos procesos. Por ejemplo, si has decidido colocar una hero image que ocupa gran parte de la pantalla, tal vez sea conveniente añadir el icono de una flecha direccional para indicar que el usuario debe desplazarse hacia abajo para encontrar mayor información. En este caso, añadir una pequeña animación en este icono sería de ayuda para recordar al usuario que puede desplazarse hacia abajo en la página, adicionalmente al pinchar sobre este icono el usuario sería dirigido inmediatamente a la sección siguiente.
Necesarios
Siguiendo con la línea de pensamiento del punto anterior, ya que las interacciones deben ser informativas, no se pueden añadir animaciones a cada elemento del sitio. Como ya mencionamos, de preferencia se deben añadir animaciones en los elementos con los que el usuario puede interactuar como es el caso de botones y enlaces. Entonces, por regla general no se deben animar elementos con los que el usuario interactúa, aunque existen algunas excepciones como por ejemplo añadir transiciones a cuadros estadísticos que aparecen en tu página. Este tipo de animación hace que los usuarios presten mayor atención a la información estadística. De igual manera, siempre debes preguntarte cuáles son los elementos interactivos que realmente necesitan de una animación para tener sentido en la página. Y puedes equilibrarlo animando otros elementos para atraer más la atención a dicho elemento particular, pero no es recomendable añadir animaciones a toda la página pues de esta manera los elementos interactivos pueden pasar un poco desapercibidos.
Rápidos
A tu audiencia no le gusta esperar. Si una página tarda más de un segundo de lo usual en cargar, las probabilidades de que el usuario termine abandonando dicha página son bastante altas. El tiempo de respuesta de una página no sólo afecta el tráfico web y la tasa de rebote, sino también la experiencia de usuario, así que debes asegurarte que el diseño se encuentre optimizado para la velocidad.
Esta velocidad también debe trasladarse en los efectos de animación de los elementos interactivos. No sólo deben ser fluidos, sino también rápidos. Por supuesto, debes asegurarte de configurarlos a una velocidad adecuada para que el efecto realmente se note, después de todo las interacciones comunican un mensaje de forma visual. Pero en general, un segundo debería bastar. Si la animación tarda más puede ser incómodo para los usuarios, sin importar que tan bien lograda esté esa animación. Especialmente si en cada botón o enlace la animación es lenta, entonces sin duda alguna acabarás con la paciencia de tu audiencia.
En conclusión….
Ahora que ya conoces todas las características que posee toda buena animación puedes añadir la interactividad necesaria en tu sitio web siguiendo buenas prácticas y revisando ejemplos de otras páginas que implementan efectos animados.
Las interacciones tienen un gran poder en un sitio web, pero deben ser realizadas con cuidado. Estudia apropiadamente las interfaces que hacen un buen uso de las interacciones para que puedas aplicarlas de forma apropiada en tu próximo proyecto web.
