Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
5 errores a evitar en el diseño de microinteracciones UX
Diseño UX
13/4/2020
|
Daniel Torres Burriel
El ecosistema digital es movimiento. El mundo de las microinteracciones UX es un océano de posibilidades dentro del diseño de la UX (experiencia de usuario). Sin embargo, este amplio abanico puede nublar en ciertos momentos la usabilidad de nuestros productos si no se usa de manera adecuada. Explico los 5 errores principales a evitar para sacar el mayor partido y efectividad a las microinteracciones.
El artículo de Issara Willenskomer, 5 Mistakes to Avoid When Designing Micro-interactions, describe cinco grupos de errores a tener muy en cuenta a la hora de diseñar microinteracciones UX:
Falta de sincronicidad narrativa
No importa lo deslumbrante que pueda resultar una microinteracción. Si no está sincronizada no será efectiva y disminuirá su usabilidad, ya que la esencia fundamental de añadir movimiento a la interface es facilitar y guiar al usuario a través de la navegación del producto. Si una microinteracción sucede de manera asíncrona a la narrativa de la navegación, muy probablemente aportará carga cognitiva de manera innecesaria ya que no estaremos ayudando al usuario en sus procesos.
¿Mantienen estas microinteracciones limpia la navegación y la UX (experiencia de usuario), o la enturbian y aumentan la carga cognitiva?
Algunos consejos a tener en cuenta en este sentido son:
- No sacrificar contenido en pos de una microinteracción. El contenido relevante para el usuario es prioritario y no será conveniente añadir interacciones si éstas lo ocultan o entorpecen su visualización.
- Alinear el tiempo de movimiento con la narrativa del usuario. Ejemplos como iconos de navegación que aparecen con delay en el menú, o iconos que aparecen desincronizados unos de otros son prácticas a evitar puesto que no facilitan la navegación.
Omitir las expectativas de los usuarios
En la experiencia de usuario, la narrativa es importante por varias de razones. Esta narrativa está directamente relacionada con las expectativas de los usuarios, la continuidad, y cómo impactan en la carga cognitiva. Los modelos mentales también intervienen de manera activa, ya que organizan y dan sentido a la información que reciben y con la que interactúan.
Es fácil caer en la trampa de animar múltiples elementos para dar brillo extra a las interfaces. Esto puede suceder cuando los diseñadores se basan únicamente en ser creativos a nivel visual, sin tener en cuenta los modelos mentales de los usuarios. Un ejemplo clave de este tipo de errores es animar los campos de texto sin seguir las expectativas de los usuarios ni patrones UX. Será por tanto necesario enfocarse en preservar la narrativa central de la interacción.
Añadir complejidad a los movimientos
Las microinteracciones de un solo movimiento unificado resultan mucho más eficientes que aquellas que muestran varios movimientos a la vez. A su vez, éstos resultarán más limpios y directos si son sencillos. Por lo tanto es recomendable asegurarse de que las microinteracciones ocurran como un solo movimiento unificado. Si una microinteracción contiene varias acciones que ocurren en diferentes momentos cronológicos, quizás sea momento de cuestionarla.
No tener en cuenta el affordance de los elementos
Otro error que suele ocurrir en bastantes ocasiones es olvidar el affordance de cada elemento. Si se omite esta regla y los diseñadores dan rienda suelta a su imaginación, un botón de checkout puede convertirse en algo totalmente distinto, distorsionando así su función esencial. Por lo tanto, es importante no romper las propiedades visuales de cada elemento. Si actúa como un botón, debe parecer un botón.
Falta de intencionalidad
La finalidad de cualquier interacción es comunicar algo útil para el usuario. Sin embargo, a menudo se observan sitios web sobrecargados de animaciones sin finalidad aparente. Uno de los grandes errores es comenzar a diseñar microinteracciones sin un análisis de objetivos previo. Por consiguiente, es importante recalcar que una microinteracción siempre ha de tener una intencionalidad funcional que aporte un beneficio extra al usuario, algo esencial en la UX.
Ejemplo de microinteracción con intencionalidad y propósito: ayuda al usuario a saber dinámicamente el porcentaje de carga. La velocidad del movimiento va en sintonía con la velocidad de carga.
El artículo Microinteractions can make or break your experience detalla varias claves que ayudan conseguir de manera efectiva estos beneficios. Son los siguientes:
- Analizar las necesidades de los usuarios y sus contextos para tener un punto de partida sólido. Este factor es clave para diseñar microinteraciones que aporten un valor añadido a la navegación.
- Establecer un modelo de comportamiento preciso y consistente dentro de todas las microinteracciones.
- Los movimientos deberán de ser fluidos. Ya que movimientos entrecortados rompen el dinamismo, perdiendo así su propósito.
- Recrear patrones basados en movimientos naturales. Por ejemplo, simular la ley de la gravedad, la inercia, la rotación en sentido horario en lugar de a la inversa, etc.
- Mantener el contexto en los cambios de vistas. (Por ejemplo desplazamientos o giros de páginas).
Cómo bien decía el slogan de Pirelli, “La potencia sin control no sirve de nada”. Esta cita se hace muy presente en el mundo del Motion Design, dónde puede resultar fácil distraerse del objetivo y la intención final de las microinteracciones. Sin embargo, las opciones que nos ofrecen estos recursos son muy amplias, y bien utilizadas pueden aportar un gran valor a nuestros productos digitales.
Lee también:
Artículo actualizado en marzo de 2022