Dominando la Consistencia en la Interfaz: Cómo Crear una Experiencia de Usuario Fluida
¿Alguna vez has sentido la frustración de navegar por un sitio web o una aplicación y no entender cómo funciona? Por supuesto que sí.
La razón de tu frustración probablemente es una interfaz mal diseñada que no te permite navegar de manera intuitiva. En su lugar, tienes que detenerte y analizar cada elemento para entender cómo funciona y para qué sirve.
Uno de los errores más comunes que llevan a un mal diseño de producto es la inconsistencia en la interfaz de usuario.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
Aparte de ser uno de los errores más habituales, también es uno realmente fácil de evitar o de corregir en general. Así que, entendamos de qué se trata la inconsistencia en la interfaz de usuario y cómo puedes asegurarte de que tus usuarios no se encuentren con ella.
Entendiendo la consistencia en la interfaz de usuario
Como su nombre lo indica, la consistencia en la interfaz de usuario se trata de tener elementos de UI idénticos, diseño atómico y una experiencia de usuario global similar para las mismas acciones o entidades dentro de tu producto.
Si tienes botones principales en varios lugares de tu interfaz, todos deberían verse igual (UI) y funcionar igual (UX). Por ejemplo, si inicias sesión en tu cuenta de Dropbox y navegas por las distintas secciones, notarás que todos los botones de acción principal son idénticos.
Si observas más de cerca, no solo los botones de acción principal son consistentes en Dropbox, sino prácticamente todos los elementos.
Existen varias razones importantes por las que los equipos de diseño prestan mucha atención a la consistencia en la interfaz de usuario. Específicamente:
- Se ve limpio y agradable a la vista. La diversidad no es lo mejor para las interfaces de usuario. Tener demasiados tipos de elementos visuales hace que la interfaz sea pesada y dificulta la lectura.
- Da una apariencia profesional. Una interfaz limpia deja una impresión de profesionalismo y destreza. Los usuarios tienden a confiar más en las marcas si sus sitios web o productos están bien diseñados.
- Mejora la experiencia de usuario. Si ves un botón negro en algún lugar de Dropbox y lo identificas como la acción principal, entonces, cada vez que veas un botón igual, sabrás que también es una acción principal. Por lo tanto, no tendrás que pensar qué se supone que debe hacer ese botón cada vez que lo encuentres.
Por último, también está el factor del desarrollo de esta interfaz. Si tienes elementos de UI consistentes en todo tu producto, el equipo frontend no tendrá que desarrollar cada nuevo elemento desde cero. En su lugar, crearán un único elemento y lo reutilizarán en las nuevas pantallas que tengan que desarrollar. De este modo, reduces drásticamente el tiempo que lleva crear nuevas interfaces y funcionalidades.
A pesar de su importancia e impacto en la experiencia de usuario, no siempre está presente el diseño consistente. Incluso los grandes productos tecnológicos cometen este error. El menú de ajustes de Android es mi ejemplo favorito.
Por favor, mira los diferentes elementos de esta lista y dime cuáles son clicables (botones) y cuáles solo son texto informativo. Lo más probable es que no sepas a menos que abras el mismo menú en tu teléfono y empieces a tocar todo.
Incluso si lo adivinaste bien (son "Google Account data" y "Photos & videos"), te tomó un poco de procesamiento cognitivo llegar a esa conclusión.
No es así como debería funcionar la experiencia de usuario. Después de todo, la famosa cita del gurú de UX Steve Krug dice:
No me hagas pensar.
Por cierto, te recomiendo mucho que leas su libro junto con la "biblia" de UX de Don Norman - The Design of Everyday Things.
La idea general aquí es que tus usuarios podrán reconocer automáticamente los elementos en tu interfaz sin tener que pensar de qué se trata y navegar por tu aplicación casi de manera intuitiva.
Fundamentos del diseño de UI
Antes de avanzar para entender cómo mantener tu diseño consistente, repasemos los principios fundamentales del diseño que permiten que la experiencia de usuario y la consistencia sean posibles desde el principio.
Claridad y simplicidad
Ya quedaron atrás los días de los sitios web con gifs parpadeantes y todos los colores del arcoíris representados en la interfaz de usuario (millennials, ¿los recuerdan?).
Cuanta más gente comenzó a usar internet, más atención prestaron los diseñadores de UI y UX a la manera en que estos perciben e interactúan con las interfaces de usuario.
Lo que descubrieron pronto es que tener demasiados colores y elementos visuales obstaculiza a los usuarios para realizar las tareas que desean. En su lugar, lo único que obtienen al navegar por esas interfaces es fatiga visual.
Así que, naturalmente, nos movimos hacia el minimalismo y la simplicidad. La consistencia en la interfaz de usuario, de hecho, es otra forma de hacer tu interfaz más simple.
Jerarquía visual
Cuando tienes muchos elementos en la pantalla, se vuelve difícil comprender la relación entre ellos. Por ejemplo, ¿cómo sabes si cierto texto es el encabezado de un artículo o simplemente parte del texto?
Ayudas a tus usuarios a entender estas relaciones mediante la jerarquía visual. Al colocar elementos en la parte superior, hacerlos más grandes, coloridos, en negrita y utilizando otros trucos, puedes ayudar a que los usuarios identifiquen fácilmente cuáles son más importantes que otros elementos en la pantalla. Así, los usuarios mirarán intuitivamente ese elemento primero antes de pasar al siguiente.
Existe un meme famoso que demuestra la magia de la jerarquía visual.
¿Sonreíste al leer el texto aquí, verdad? Exactamente, como cualquier otro ser humano, tu visión también está programada para seguir la jerarquía visual.
Retroalimentación
Cada vez que tu usuario realiza una acción en tu producto, espera saber si esa acción ocurrió o no.
Si haces clic en el botón de eliminar y no pasa nada después, podrías confundirte. ¿Se eliminó o hubo un error? Para ayudar a los usuarios con esto, necesitarás proveerlos de retroalimentación visual (o auditiva, e incluso háptica) que les indique los resultados de la acción.
Si tu sistema procesó correctamente la solicitud de eliminación, diles que el elemento fue eliminado. Si en cambio ocurre un error, nuevamente, házselo saber. De esta manera, sabrán que su elemento no fue eliminado, y que necesitan intentarlo de nuevo o contactarte para soporte.
Mejores prácticas para lograr la consistencia en la interfaz de usuario
A primera vista, la consistencia en la UI es muy sencilla, y cualquier diseñador debería ser capaz de conseguirla. Eso es cierto, asumiendo que eres la única persona trabajando en el producto y que el propio producto es pequeño y simple.
El momento en el que comienzas a trabajar como parte de un equipo más grande (donde cada diseñador tiene su propio estilo individual) y en un producto que consta de docenas de páginas y funciones, mantener los elementos consistentes se convierte en un verdadero reto.
Simplemente no puedes recordar físicamente cómo luce cada elemento en todo el producto y replicarlo en la nueva funcionalidad en la que estás trabajando.
Por suerte, existen muchos procesos y marcos de trabajo que te permiten mitigar el riesgo de agregar inconsistencias a tu diseño. Aquí tienes tres que se consideran estándares de la industria.
Guías de estilo: Este documento detalla los estándares de diseño para tu producto y representa la identidad de tu marca. Incluye la tipografía (también conocida como fuentes, su tamaño, ubicaciones, etc.) para los diferentes tipos de texto (por ejemplo, encabezados, cuerpo, comentarios, etc.), iconografía, tu paleta de colores y otros elementos centrales de diseño.
Con una guía de estilo te aseguras de que todo el equipo de diseño trabaje bajo los mismos estándares globales y mantenga tu contenido, colores e íconos consistentes en todo el producto.
Apple es probablemente el mejor ejemplo de cómo hacer cumplir su guía de estilo en todas partes, incluso para las empresas que desarrollan apps para sus productos.
El ejemplo aquí es la guía de estilo para el botón que puedes colocar en tu sitio web para que los usuarios descarguen tu app desde la App Store. Como puedes ver, Apple es muy clara respecto a la manera en que puedes usar este botón.
Bibliotecas de patrones: Este es otro documento guía que se centra en describir los detalles de bajo nivel de tus estándares de diseño, a diferencia de la guía anterior que proporciona los aspectos esenciales de alto nivel. Las bibliotecas de patrones de diseño son un entregable común cuando tu equipo aplica diseño atómico.
El concepto de diseño atómico es tener claramente definidos pequeños elementos de la interfaz de usuario que, combinados, crean otros más complejos. Las categorías comunes de elementos y sus combinaciones en este marco incluyen:
- Átomos (de ahí el nombre): Elementos básicos como formularios, botones, iconos y otros. Son elementos que no se pueden dividir en partes más pequeñas.
- Moléculas: Combinación de átomos que cumplen un propósito específico. Ejemplos son la paginación para tus listas, rutas de navegación (breadcrumbs), etc.
- Organismos: Elementos de interfaz más complejos compuestos de múltiples átomos y moléculas que representan entidades. Estos son tarjetas, barras de búsqueda y otros.
- Plantillas: Combinaciones de organismos reutilizables que puedes añadir a tus páginas. Pueden ser listas de resultados de búsqueda, secciones de descripción de productos, etc.
- Página: El resultado final de tu diseño y el lugar donde el usuario interactúa con él. Como su nombre indica, son las distintas páginas de tu producto como tu página de inicio.
Una biblioteca de patrones es una colección de moléculas y organismos estandarizados que puedes utilizar en tu diseño. Puedes lograr coherencia reutilizando siempre los mismos elementos en diferentes partes de tu producto, ya que los usuarios reconocerán instantáneamente el elemento en cuanto abran una página específica.
Sistema de diseño: Es la combinación general de guías de estilo de alto nivel, tipografías, esquemas de color y descripciones de pequeños elementos de interfaz, así como una colección de componentes de interfaz ya hechos que puedes usar tanto en el diseño como en el desarrollo del producto.
Casi todas las grandes empresas tecnológicas desarrollan su propio sistema de diseño para garantizar la coherencia visual. Google tiene Material, Shopify tiene Polaris y Apple tiene Human Interface. También existen sistemas independientes y de código abierto que puedes integrar fácilmente en tu producto y utilizar de forma gratuita. Mi favorito entre ellos es ant.design.
Al igual que otros sistemas de diseño, viene con una biblioteca de diseño que puedes usar en Figma u otras herramientas populares y una biblioteca de componentes precodificados en frameworks populares (por ejemplo, react) que tus desarrolladores pueden usar en su código.
Herramientas para Mantener la Coherencia de la Interfaz
Para mantener la coherencia de tu diseño en todos tus equipos y partes de tu producto, deberás documentar tus directrices y asegurarte de que todo tu equipo colabore en ello.
Para documentar y aplicar tus estándares de diseño en las nuevas funciones y pantallas del día a día, puedes aprovechar las funciones especializadas de muchas herramientas de diseño modernas.
Figma, por ejemplo, te permite crear componentes escalables que puedes almacenar en el archivo de tu sistema de diseño y que todos en tu empresa pueden utilizar.
También soporta Kits de UI, una biblioteca predefinida de directrices y reglas de diseño que puedes descargar desde la librería de Figma y usar en tus productos. Aquí tienes un kit para el Material Design de Google.
Este kit en particular te ofrece una gran variedad de elementos para diseñar una app Android cumpliendo con los estándares de diseño de Google.
Ahora, la parte de colaboración. Sin la colaboración adecuada en tu equipo de diseño, seguramente tendrás elementos que no siguen tus directrices y rompen tu coherencia visual. Afortunadamente, existen también herramientas de diseño UX/UI para fomentar la colaboración.
Zeplin, por ejemplo, ayuda a tus diseñadores y desarrolladores a colaborar de forma más efectiva creando versiones del diseño pensadas para desarrolladores donde el equipo de desarrollo puede encontrar las especificaciones exactas de CSS de los elementos, así como descargar fácilmente imágenes, iconos y otros recursos del diseño. Además, se integra con otras herramientas para el desarrollo de interfaces para ayudarte a migrar fácilmente tus diseños desde donde los creaste a Zeplin.
Pruebas e Iteración para la Coherencia de la Interfaz
Al igual que los requisitos de tu producto o tu estrategia, las directrices de diseño tampoco son documentos estáticos. Siempre acabarás haciendo cambios para mantenerlas actualizadas.
Algunas de las razones más comunes para cambiar tus directrices incluyen:
- Añadir nuevos elementos que no estaban presentes en la biblioteca.
- Adoptar nuevas tendencias y buenas prácticas de diseño.
- Detectar problemas y “errores de diseño” que deben solucionarse.
Finalmente, es una excelente práctica dejar que tu equipo de diseño lo revise ocasionalmente y realice pequeñas mejoras.
Además de mejorar el aspecto general y la calidad de tu diseño, esto también te permite llevar a cabo lo que se denomina una “prueba de consistencia de UI”, en la que tu equipo de diseño busca activamente inconsistencias en tu sistema de diseño y las corrige.
También puedes realizar una prueba similar en tus diseños terminados. Siempre existe la posibilidad de que varias funciones contengan elementos que no están presentes en el UI Kit o que no se vean como deberían.
Además de realizar pruebas internas, también te sugeriría que involucres activamente a tus usuarios en el proceso de pruebas. Hay dos formas de hacerlo.
- Pide comentarios sobre el diseño, comprende las necesidades de tus usuarios e itera activamente en función de sus opiniones.
- Realiza pruebas de usabilidad para entender el nivel de consistencia en tu interfaz.
En cuanto a esto último, imagina que has utilizado tu botón de acción principal en 10 lugares diferentes dentro de tu producto. ¿Estás seguro de que en esos 10 casos, tus usuarios lo identificarán como la acción principal?
No puedes estar seguro a menos que realices pruebas de usabilidad moderadas o no moderadas con prototipos creados en tu herramienta de UX y observes la forma en que interactúan con él.
En base a estas pruebas y comentarios de los usuarios, podrás tomar decisiones de diseño informadas por datos.
No Me Hagas Pensar
La coherencia es uno de los elementos centrales de un gran diseño de UI. Al mantener todo simple y visualmente idéntico, te aseguras de que tus usuarios no se pierdan en tu interfaz. En cambio, comprenden intuitivamente el propósito de cada elemento en su pantalla y realizan fácilmente sus tareas.
No olvides suscribirte a nuestro boletín para más recursos y guías de gestión de productos, además de los últimos podcasts, entrevistas y otros conocimientos de líderes y expertos de la industria.
