La magia del CSS: cómo aplicar microinteracciones para mejorar la usabilidad
Cuando hablamos de desarrollo web enfocado al front-end existen 3 ingredientes fundamentales:
HTML: (HyperText Markup) Lenguaje de marcado que se utiliza para el desarrollo de la estructura de una página web.
CSS: (Cascading Style Sheets) Lenguaje de hojas de estilos creado para controlar el aspecto o apariencia de los documentos electrónicos creados con HTML.
JS: (JavaScript) Lenguaje de programación interpretado, se encarga de la funcionalidad y se puede usar para añadir características interactivas a tu sitio web.
¿Un producto que cumple o uno que enamora?
La mezcla y el buen uso de los 3 ingredientes anteriormente nombrados, dan como resultado una aplicación o sitio web que cumple de manera visual y funcional, sin embargo existen 2 ingredientes adicionales que son el toque secreto para hacer que un producto digital desprenda magia y genere esa atracción estética sin descuidar la experiencia final del usuario.
Microinteracciones + usabilidad: dos conceptos que juntos hacen la diferencia entre un producto que cumple y uno que enamora.
Las microinteracciones son pequeñas animaciones o detalles visuales que de una forma sutil ayudan a completar o informar al usuario un cambio de estado, una acción o respuesta realizada con éxito, por otro lado la usabilidad es la facilidad con que las personas pueden utilizar una herramienta, objeto o instrucción con el fin de alcanzar un objetivo.
Las microinteracciones deben reforzar de manera intuitiva el comportamiento natural de la interfaz.
Menos es más:
Cuando hablamos de microinteracciones para mejorar la usabilidad es muy importante saber el por qué y para qué de lo que se está animando. Menos es más y un sitio saturado de elementos que están en constante movimiento va a causar el efecto contrario a una buena experiencia, desviando la atención de lo que quizás no es el principal objetivo, por el contrario se debe pensar en estas como una herramienta que refuerzan de manera intuitiva el comportamiento natural de la interfaz.
Las microinteracciones las encontramos a diario en los sitios que más frecuentamos, algunos de estos son los botones de like en sitios como Facebook, Instagram y Twitter, los campos de validación en un formulario y las alertas de notificación de diversas plataformas.
¿Dónde puedo hacer uso de microinteracciones?
Al momento de trabajar en las animaciones o microinteracciones de una plataforma, lo principal es definir el objetivo y cómo están contribuyendo a mejorar la experiencia del usuario. A continuación algunos ejemplos.
Botones:
Cambio de estado al hover
Cambio de estado al click:
Formularios:
Cambio de estado al ingresar texto
Fade in / fade out
En este ejemplo podemos ver cómo se muestra información mediante una condición.
Ampliar información mediante el hover al elemento.
En conclusión:
Podemos deducir que las microinteracciones bien implementadas dotan de personalidad, alma y empatía nuestro producto final, haciendo más cálida nuestra interacción con productos digitales.
Ser parte de ilógica es buscar día a día los ingredientes adecuados para construir un producto digital que genere esa propuesta de valor en el cliente y que los usuarios disfruten su navegación, si estas interesado en ser parte de nuestro equipo, puedes ver las vacantes disponibles en Get on Board.
