El diseño de interfaz de usuario, aunque pueda parecer complicado, puede simplificarse mucho teniendo en cuenta unas simples reglas lógicas y pautas consistentes. A lo largo de la experiencia de un diseñador de productos, es común descubrir que la mayoría de las decisiones de diseño no se basan en talento artístico o en intuición, sino en un conjunto de reglas lógicas que, cuando se aplican correctamente, facilitan la creación de interfaces claras, coherentes y usables.
Estas reglas son fundamentales para organizar la información, mejorar la legibilidad, y asegurar que la interfaz sea accesible para todos los usuarios. En resumen crear buenos proyectos. En este post voy a resumirte las principales normas o pautas para que puedan guiarte en tus procesos de diseño.
Espaciado y Agrupación
Utiliza el espacio para agrupar elementos relacionados. Esto ayuda a estructurar la interfaz y facilita la comprensión de la información. El espaciado en blanco es un aliado de los diseñadores, productos minimalistas y limpios producen sensación de seguridad y confianza al usuario.
Puedes agrupar elementos relacionados en una interfaz utilizando varios métodos:
- Colocar elementos relacionados en el mismo contenedor.
- Situar los elementos próximos entre sí, aprovechando el espacio.
- Hacer que los elementos parezcan similares visualmente.
- Alinear los elementos en una línea continua.
Aunque el uso de contenedores es una forma visualmente efectiva de agrupar elementos, puede generar desorden innecesario en el diseño. Por eso, es recomendable explorar otras técnicas de agrupación, como el uso del espacio o la similitud visual, que suelen ser más sutiles y contribuyen a simplificar la interfaz.
El uso del espacio es especialmente eficaz para agrupar elementos relacionados. También puedes combinar varios métodos para reforzar las agrupaciones y hacerlas más evidentes.
Por ejemplo, si el contenido en un diseño está demasiado comprimido, puede parecer desorganizado y confuso. Aumentar el espacio entre los elementos permite agrupar el contenido de manera clara, lo que facilita su organización y comprensión
Coherencia
Asegúrate de que los elementos similares se vean y funcionen de manera similar, tanto dentro de la interfaz como en comparación con otras aplicaciones. Ya conocemos la famosa ley de consistencia y estándares, el usuario está a costumbrado a determinados elementos y funcionalidades, ellos pasarán más tiempo en el resto de productos que en el nuestro propio, así que no tratemos de innovar con eso, aprovechemos lo que el cliente ya conoce.
Cuando los elementos de una interfaz se presentan de manera uniforme y funcionan de forma similar, tanto dentro de un producto como en comparación con otros productos consolidados, los usuarios pueden navegar e interactuar sin tener que reaprender continuamente cómo operar el sistema. Esta predictibilidad no solo mejora la usabilidad, sino que también minimiza la probabilidad de errores.
Un problema común que puede surgir en el diseño de interfaces es la inconsistencia en los estilos de los elementos visuales, como los íconos. Por ejemplo, si algunos íconos están rellenos y otros no, los usuarios pueden confundirse, ya que los íconos rellenos a menudo sugieren que un elemento está seleccionado o activo. Para evitar este tipo de confusión, es importante unificar el estilo de los íconos, utilizando, por ejemplo, un grosor de trazo uniforme de 2 puntos y esquinas redondeadas. Esto no solo mejora la coherencia visual, sino que también asegura que todos los íconos tengan un peso visual similar.
Además de la coherencia en el estilo, es fundamental considerar la accesibilidad. Añadir etiquetas de texto a los íconos ayuda a clarificar su función, lo que es especialmente útil para usuarios que dependen de lectores de pantalla. Estos dispositivos describen la interfaz a personas con discapacidades visuales, utilizando voz o braille. La inclusión de etiquetas de texto asegura que todos los usuarios, independientemente de sus capacidades, puedan entender y navegar por la interfaz de manera efectiva.
En resumen, la coherencia y la accesibilidad son pilares esenciales en el diseño de interfaces. Al mantener un estilo visual uniforme y asegurarse de que todos los elementos sean comprensibles para una amplia variedad de usuarios, se crea una experiencia de usuario más intuitiva y accesible.
Funcionalidad Visual
Los elementos que se parecen deben funcionar de manera similar. Diferencia visualmente aquellos que tienen funciones distintas para evitar confusiones. Muy parecido a lo que hemos comentado en el punto anterior, si el usuario ya entiende el funcionamiento de determinado elemento, no tratemos de innovar porque solo vamos a confundir. Por ejemplo, no crees tags demasiado similares a tus botones pues eso puede llevar a equívocos al usuario y confundir los dos elementos.
Jerarquía Visual
Crea una jerarquía clara para guiar al usuario hacia los elementos más importantes primero. Para ello podemos ayudarnos con mapas de calor para entender como los usuarios leen nuestros productos. Hemos de ayudarnos de los factores que crean esa jerarquía, como el color, el tamaño, los espacios en blanco o la posición.
No toda la información en una interfaz de usuario tiene la misma relevancia. El objetivo principal del diseño debe ser organizar y presentar la información en un orden de importancia claro, destacando los elementos más cruciales. Esto se logra mediante una jerarquía visual, que guía a los usuarios a través del contenido de manera intuitiva y eficiente.
Una jerarquía visual bien definida permite a los usuarios procesar la información rápidamente y enfocarse en las áreas más importantes. Además, contribuye a un diseño estéticamente equilibrado, generando una sensación de orden y estructura. Para crear una jerarquía visual efectiva, se pueden utilizar diferentes técnicas, como variaciones en el tamaño, color, contraste, espaciado, posición y profundidad de los elementos.
Si la jerarquía visual no está bien definida, todos los elementos pueden parecer igualmente importantes, lo que genera confusión y dificulta que los usuarios identifiquen rápidamente la acción principal. Una manera sencilla de evaluar la efectividad de la jerarquía visual es aplicar la «prueba del estrabismo»: entrecierra los ojos, aléjate de la pantalla o desenfoca el diseño. Aún deberías poder identificar los elementos más importantes y comprender la función de la interfaz.
Para corregir esto, la acción principal debe ser el elemento más visible de la interfaz. Esto se puede lograr utilizando un color de fondo de alto contraste y una fuente en negrita para el botón, mejorando tanto la jerarquía visual como la accesibilidad, especialmente para usuarios con problemas de visión.
Aunque la jerarquía visual puede mejorar significativamente con estos ajustes, siempre hay margen para optimizar. Por ejemplo, si el bloque de texto principal sigue siendo demasiado prominente en comparación con su importancia real, es necesario hacer más ajustes. Una solución podría ser aplicar algunas pautas tipográficas, como reducir el tamaño de la fuente o ajustar el espaciado, para asegurar que la jerarquía visual esté alineada con las prioridades del contenido.
En resumen, la jerarquía visual es fundamental para crear interfaces de usuario efectivas y accesibles. Al organizar y destacar la información de manera adecuada, se facilita la navegación y se mejora la experiencia general del usuario.
Simplicidad
Elimina estilos innecesarios que puedan añadir desorden visual. La simplicidad mejora la usabilidad y reduce la carga cognitiva. Conocemos la ley del UX del gran Jakob Nielsen, Estética y diseño minimalista. Un producto digital ha de ser funcional, con eso no digo que no podamos usar ilustraciones o fotografías, pero es importante que todo tenga un porqué. No creamos iconos decorativos, los iconos han de ser informativos. Y eso nos pasará con el resto de elementos, no creamos líneas para decorar o llenar espacios vacíos, creamos divisores si son necesarios. (Que ya te digo de antemano, generalmente no los son…).
Uso Intencional del Color
Aplica el color con un propósito claro, principalmente para indicar interactividad, y evita el uso del color solo por razones estéticas. Conocemos la regla del 60% 30% 10% precisamente ese 10 va desatando a nuestro color de CTA, si hay demasiados elementos ese color, esa jerarquía pierde toda la fuerza. Los colores son una de nuestras mejores armas a la hora de diseñar, úsalos con cabeza.
No todos los elementos interactivos necesitan color adicional para ser reconocidos como tales. Algunos ya tienen características visuales que indican su interactividad. Por ejemplo, en un diseño de tarjetas, estas pueden parecer interactivas por su estructura y diseño, incluso sin la necesidad de añadir un enlace de color azul.
Al ser selectivo con el uso del color, no solo mejorarás la claridad y la funcionalidad del diseño, sino que también reforzarás la identidad de la marca sin sobrecargar visualmente la interfaz.
Contraste Adecuado
Asegúrate de que todos los elementos de la interfaz tengan suficiente contraste para ser visibles y legibles, especialmente para personas con discapacidades visuales. Tenemos muchas herramientas para comprobar que todo cumpla los estándar de accesibilidad, por ejemplo en Figma Constrast o Stark.
El contraste es un aspecto clave en el diseño de interfaces, ya que mide la diferencia en el brillo percibido entre dos colores. Se expresa como una relación que varía de 1:1 a 21:1. Por ejemplo, un texto negro sobre un fondo negro tendría la relación de contraste más baja (1:1), mientras que el mismo texto sobre un fondo blanco tendría la relación de contraste más alta posible (21:1). Hay diversas herramientas en línea disponibles que facilitan la medición de estas relaciones de contraste entre diferentes colores.
Para garantizar que todos los usuarios, incluidas las personas con discapacidad visual, puedan distinguir claramente los elementos de la interfaz, es esencial cumplir con al menos los requisitos de contraste de nivel AA establecidos por las Pautas de Accesibilidad al Contenido Web (WCAG) 2.1. Estas pautas sugieren que los elementos de la interfaz, como los botones y los campos de formulario, deben tener una relación de contraste de al menos 3:1.
Accesibilidad del Texto
Un texto es informativo, no decorativo, lo más importante de un texto es que sea legible. Evita usar tipografías que dificulten la legibilidad sobre todo en los cuerpos de texto, no es casualidad que la mayoría de marcas importantes utilicen las mismas tipografías o muy similares en sus productos. Comprueba el contraste de estas, su tamaño, no creemos cuerpos de texto menores a 16px o 14px en mobile. Ten en cuenta la altura de línea para mejorar la lectura, y asegúrate que tus textos sean legibles.
Para asegurar que las personas con discapacidad visual puedan leer el texto claramente, es crucial que el texto cumpla con los requisitos de contraste de nivel AA según las Pautas de Accesibilidad al Contenido Web (WCAG) 2.1:
Texto grande (superior a 18 px con peso en negrita o superior a 24 px con peso normal): requiere un contraste mínimo de 3:1.
Texto pequeño (18 px o menos): debe tener una relación de contraste mínima de 4,5:1.
Tipografías
Nos encantan las tipografías, eso lo sabemos pero es importante limitarse a uno mismo. Limita el uso a una sola tipografía o a dos cómo máximo, para los cuerpos de texto usa tipografías sans serif que suele ser más legible y neutral. Usa diferentes pesos (normal y negrita) para destacar elementos importantes sin añadir complejidad innecesaria.
Evita el Texto en Mayúsculas
Usar un texto en mayúsculas puede ser un arma de jerarquización pero es un arma de la que no debemos usar o nos dispararemos en un píe. Las mayúsculas son difíciles de leer y deben usarse con moderación. Cuando lees, te fijas en la forma de la palabra, en lugar de mirar cada letra. La forma te ayuda a reconocer la palabra más rápidamente. Las palabras en mayúsculas tienen todas la misma forma rectangular. Esto te obliga a leer cada letra una por una.
No Usar Negro Puro
No uses negros puros, no funcionan bien, generan demasiado contraste y puede ser molesto y fatigar la vista de los usuarios. El negro tiene un brillo cromático del 0 % y el blanco del 100 %. La gran diferencia en el brillo cromático hace que nuestros ojos trabajen más. Puedes usar grises oscuros, incluso es una oportunidad para crear tu propia versión de negro mezclándolo con tu color de marca, para crear un color único y diferencial.
Alineación del Texto
Que fijación existe con alinear textos al centro, evítalo a no ser que sea un texto muy corto, que no tenga demasiados saltos de línea. Alinea el texto a la izquierda para facilitar la lectura siempre que puedas, ya que esta es la forma natural de lectura en la mayoría de los idiomas occidentales. Y eso mejorará mucha lo comprensión lectora de nuestros usuarios y sobre todo el tiempo de lectura, pues los saltos de línea no alineados a la izquierda son mucho más complicados para el lector.
Tus ojos deben esforzarse más para encontrar el punto de inicio de cada línea.
Altura de Línea Adecuada
Una altura de línea de al menos 1,5 mejora la legibilidad al evitar el desgaste en el usuario. Cuanto más pequeño el texto se recomienda más altura de línea en su proporción para evitar manchas de texto y dificultar su lectura, algo muy similar pasa con el tracking en las letras.
Si aplicas estas reglas seguro que tus diseños mejoran notablemente, recuerda que existen muchos más factores para diseñar bien un producto pero a mi parecer estás son las reglas que todo diseñador de interfaces debería grabarse en la piel. Estas reglas no son normas taxativas es posible que en ciertos casos y si el producto nos lo pide se puedan obviar algunas o jugar con sus limites, pero es sólo una guía para que las compendias, una vez hecho podrás saltártelas si es necesario.
