5 reglas para mejorar la consistencia de tu interfaz
Pocas cosas nos frustran tanto como navegar un sitio o aplicación y percibir una falta de unidad entre todas sus pantallas.
A medida que un proyecto crece y agregamos nuevos componentes a los mockups, nos enfrentamos a uno de los desafíos más complejos como diseñador: mantener la consistencia de nuestras interfaces.
Parte de nuestro trabajo como profesionales es asegurarnos de que cada pantalla se perciba como una unidad bajo una misma identidad. También es un requisito fundamental si queremos garantizar una experiencia de usuario limpia y fluida a lo largo de todo su recorrido.
Antes de comenzar a trabajar en cualquier pantalla o flujo, te sugiero que tengas en cuenta las siguientes reglas para desarrollar una interfaz consistente e intuitiva para tus usuarios:
1. Respeta las convenciones
Como diseñadores, nos resulta fácil caer en la tentación de alterar lo convencional. Sin embargo, debemos recordar que la intuición de los usuarios es el resultado de una fuerte memoria cognitiva que fueron desarrollando a lo largo del tiempo, y por lo tanto alterarla puede llevar a la frustración.
Es importante que a la hora de diseñar un nuevo componente nos preguntemos “¿Qué conoce el usuario sobre esto?”. Así podremos trabajar preservando la originalidad sin alterar lo convencional.
Mantenerse fiel a las convenciones de usabilidad ayudará a las personas a reducir la curva de aprendizaje de tus diseños y a completar sus tareas sin tener que adoptar nuevos comportamientos.
Si queres aprender más sobre patrones de comportamiento de los usuarios te invito a que consultes la librería de UI Patterns o PatternTap.
2. Mantén una jerarquía visual
En diseño todo comunica. La tipografía comunica, el tamaño del texto comunica, los colores comunican. Por lo tanto, es muy importante definir todas las variantes tanto para los textos (cabeceras, párrafos, span, etc) como para los colores (fondos, enlaces, etc) y luego respetar su jerarquía en todo el sitio.
Según Luke Wroblewski (autor y ex Sr. Principal of Product Design en Yahoo!), la organización visual en una interfaz es útil para:
- Informar a los usuarios para que actúen por su cuenta durante la navegación.
- Presentar los contenidos de manera que coincida con la forma en que los usuarios priorizan la información.
- Crear un impacto emocional para que los usuarios respondan de manera positiva en el sitio.
Algunos elementos que transmiten jerarquía en el diseño son:
- Tamaños
- Contrastes
- Variantes de un objeto
- Colores
- Simetría
3. Diseña para que escale
Cuando el diseñador Stanley Wood ingresó a Spotify en 2012, el nivel de inconsistencia y ruptura que había en todas las interfaces de Spotify lo alteró por completo. Una mañana, compartió su preocupación con el resto del equipo y resultó que todos pensaban igual que él.
Para solucionar este problema, Stanley propuso definir entre todos un conjunto de principios sobre cómo debería ser la experiencia de utilizar Spotify.
Con el tiempo, estos principios se convirtieron en la columna vertebral de todas las decisiones de diseño que el equipo de producto tomaría en adelante y ayudó a reemplazar las opiniones personales por una objetivo común.
La historia de Stanley Wood es un excelente ejemplo sobre la importancia de conocer las visiones y puntos de vista de todo el equipo para que todas las decisiones apunten a una misma dirección. Llegar a un consenso y documentarlo no sólo te ahorrará muchas discusiones sino que te garantizará una mejor consistencia en cada pieza que diseñes.
4. Construye una librería de patrones
A medida que el proyecto crece y los componentes aumentan es probable que te topes con inconsistencias entre los objetos que utilices. ¿Alguna vez te pasó que aplicaste un botón en varias secciones y aún así no lucen exactamente iguales? Eso se soluciona creando una librería de patrones.
Una librería de patrones consiste en dividir los componentes de una interfaz en bloques reutilizables, organizarlos, agruparlos, nombrarlos y definir reglas para preservar su forma. Luego deberás presentarlos en un lugar donde pueda ser consultado por todo el equipo.
Algunos de los componentes que puedes incluir en una librería de patrones son:
- Tipografías
- Colores
- Formularios
- Botones
- Íconos
Hay varios frameworks para crear librerías de patrones, sin embargo, existe uno que está cambiando la manera de organizar y trabajar con componentes en gran escala: Atomic Design.
Atomic Design es una metodología creada por Brad Frost y que se popularizó en los últimos años por su particular manera de organizar los componentes. El sistema propone entender cada pieza como una unidad propia que cobra sentido a medida que se agrupa con otros para crear nuevos elementos y plantillas. La secuencia está dividida en:
- Átomos
- Moléculas
- Organismos
- Plantillas
- Secciones
Más adelante hablaré en detalle sobre Atomic Design. Mientras tanto, te recomiendo que leas un artículo de Invision para introducirte más en el tema. También está disponible el libro oficial en versión digital y papel.
5. Documenta todo lo que diseñes
Nuestro trabajo como diseñadores no puede terminar con el acabado de las piezas. La regla es simple: lo que no se puede expresar con diseño, se escribe.
Documentar cada cosa que diseñamos es un excelente ejercicio para garantizar la consistencia y ayudar a los programadores a desarrollar detalladamente las pantallas, teniendo en cuenta cada escenario que se pueda presentar durante la interacción.
Antes de sumergirte en la documentación de un componente te sugiero que antes te reúnas con tu equipo de desarrollo para definir qué especificaciones son necesarias para su correcta aplicación y obtener insights que te ayudarán a mejorar tu proceso de trabajo en el futuro.
Algunos puntos que puedes considerar a la hora de documentar tus diseños son:
- Estados de los componentes (hover, active, focus)
- Microinteracciones
- Comportamientos
- Alertas
El punto de partida para una buena documentación es la conversación. Sólo a través de la comunicación con tus compañeros podrás entender con claridad las necesidades latentes de tu equipo y adquirir un panorama mucho más amplio sobre cómo debe funcionar el producto.
Conclusión
Preservar la consistencia de tus diseños a medida que el proyecto evoluciona es un desafío que requiere de mucha disciplina y organización. Cuando una interfaz no es consistente corremos el riesgo de que la persona perciba confusión y frustración mientras navega, comprometiendo los objetivos de tu sitio o aplicación.
Si quieres aprender más sobre consistencia en UI podes comenzar con los siguientes recursos:
- Fundamentals of UI Design
- Web UI Design for the Human Eye
- Consistency in UI Design
Si te gustó este artículo te invito a que hagas click en Recomendar. También me puedes encontrar hablando sin sentido en Twitter.
