- El diseño de UI puede mejorar de forma más rápida y predecible cuando se aplican reglas lógicas consistentes para tomar decisiones de disposición, espaciado, tipografía y color, más que por sensibilidad artística
- Lo básico es agrupar elementos relacionados con espacios en blanco, usar la misma forma para la misma función y crear una jerarquía visual clara mediante tamaño, color, contraste, posición y ubicación
- Hay que reducir los colores decorativos y los bordes innecesarios, y usar el color de forma selectiva para comunicar si algo es interactivo, como enlaces y botones
- Según el criterio WCAG 2.1 AA, los elementos de UI deben asegurar una relación de contraste de al menos 3:1, y el texto pequeño de al menos 4.5:1; además del color, también se deben ofrecer pistas como subrayados o formas
- Usar una sola tipografía sans serif con pesos regular/bold, y aplicar una x-height grande, mayúsculas y minúsculas tipo oración, alineación izquierda y una altura de línea de 1.5 o más mejora la legibilidad y la consistencia
Cómo mejorar una UI con reglas lógicas
- El diseño de UI debe considerar no solo layout, espaciado, tipografía y color, sino también usabilidad, accesibilidad y psicología, por lo que las decisiones pueden volverse complejas fácilmente
- En lugar de mover elementos por intuición hasta encontrar algo que se vea bien, aplicar un sistema de reglas reutilizable permite tomar decisiones fundamentadas con mayor rapidez
- Se usa como ejemplo una pantalla de detalle de un alojamiento de alquiler temporal, y se corrige paso a paso una pantalla inicial compleja y difícil de usar
- El objetivo no es agregar decoración de marca, sino asegurar primero la intuición de uso, la accesibilidad y una calidad visual básica
1. Agrupar elementos relacionados con espacios en blanco
- Dividir la información en pequeños grupos relacionados permite entender y recordar más rápido la estructura de la pantalla
- Hay cuatro formas de agrupar elementos
- Ubicarlos dentro del mismo contenedor
- Reducir el espacio entre elementos relacionados
- Representarlos con una apariencia similar
- Alinearlos siguiendo una línea continua
- El contenedor es la pista de agrupación más fuerte, pero puede aumentar la decoración innecesaria en la pantalla
- Los espacios en blanco y la alineación son métodos más sutiles que permiten mantener la pantalla simple
- En el ejemplo, se aumenta el espacio entre contenidos para distinguir con claridad grupos de información diferentes
2. Mantener formas y comportamientos consistentes
- Los elementos similares deben verse y funcionar de manera similar no solo dentro del producto, sino también al compararlos con otros productos familiares
- Un comportamiento predecible reduce la necesidad de que el usuario vuelva a aprender cómo usar algo cada vez, y disminuye la posibilidad de errores
- En el ejemplo, los íconos mezclaban estilos rellenos y de contorno, por lo que los íconos rellenos podían interpretarse erróneamente como un estado seleccionado
- Se unifican todos los íconos con esquinas redondeadas y contorno de 2 pt para equilibrar su peso visual
- Se agregan etiquetas de texto para usuarios a quienes les cuesta entender el significado solo con íconos y para usuarios de lectores de pantalla
- Como se espera que los elementos con la misma forma funcionen del mismo modo, si la función es distinta, el tratamiento visual también debe ser distinto
- En el ejemplo, el contenedor de un ícono no interactivo se parecía al botón
Book now, por lo que se quitaron el color azul y el estilo de botón
3. Crear una jerarquía visual clara
- No toda la información tiene la misma importancia, por lo que los elementos más importantes deben destacarse más
- Ajustar tamaño, color, relación de contraste, espaciado, ubicación y profundidad permite que el usuario escanee rápido la pantalla y encuentre las áreas de interés
- Squint Test es un método que consiste en entrecerrar los ojos o ver la pantalla desenfocada para comprobar si siguen percibiéndose los elementos importantes y el propósito de la pantalla
- En la pantalla inicial, varios elementos competían con una intensidad similar, pero el botón de acción principal en la parte inferior izquierda casi no destacaba
- Al botón principal se le aplica un color de fondo de alto contraste y una fuente en negrita para convertirlo en el elemento más destacado de la pantalla
- La descripción del cuerpo estaba demasiado enfatizada para su importancia, por lo que luego se ajustan color y tipografía para bajar su jerarquía
4. Eliminar decoración innecesaria
- Líneas, colores, fondos o animaciones que no comunican significado ni agrupan elementos pueden distraer la atención y aumentar la carga cognitiva
- El espacio en blanco y el borde alrededor de la imagen del ejemplo no eran necesarios para transmitir información, así que se eliminan
- Reducir elementos decorativos simplifica la pantalla y facilita enfocarse en la información y las acciones clave
5. Asignar un rol claro al color
- Es más seguro usar el color de forma limitada para transmitir significado, en lugar de usarlo como decoración
- Un enfoque efectivo es comenzar en blanco y negro y luego agregar color solo donde sea necesario
- Aplicar el color de marca a elementos interactivos como enlaces de texto y botones ayuda a enseñar qué se puede hacer clic
- En elementos cuya forma ya comunica interacción, como una tarjeta, no es obligatorio agregar color
- El título azul y la calificación con estrellas del ejemplo no eran elementos interactivos, pero parecían clicables, por lo que se les quita el color
- Como resultado, la distinción entre elementos interactivos e información común queda más clara
6. Aplicar una relación de contraste de al menos 3:1 a los elementos de UI
- La relación de contraste expresa la diferencia de brillo percibido entre dos colores como una proporción que va de
1:1a21:1 - En el criterio WCAG 2.1 AA, los elementos de UI como campos de formulario, íconos y botones necesitan una relación de contraste mínima de 3:1
- Las flechas sobre la foto en el ejemplo podían verse mal según la imagen de fondo
- Se aplican íconos grises y un fondo blanco opaco para asegurar el contraste independientemente de la foto
- Al agregar el contenedor de fondo, también se vuelve más grande y clara el área que se puede presionar
- El botón principal inicial también tenía poco contraste con el fondo, por lo que a los usuarios con baja visión les podía costar distinguir la forma del botón
- Al elevar la relación de contraste del botón por encima de 3:1, se mejoran a la vez la accesibilidad y la jerarquía visual
- La relación de contraste se puede medir con WebAIM Contrast Checker o el plugin Contrast para Figma
7. Aplicar suficiente contraste al texto
- El criterio WCAG 2.1 AA exige distintas relaciones de contraste según el tamaño y el peso del texto
- El texto pequeño de 18 px o menos necesita al menos 4.5:1
- El texto en negrita de más de 18 px o el texto regular de más de 24 px necesitan al menos 3:1
- El contador de fotos tenía poco contraste con el fondo, por lo que se aumenta la opacidad del contenedor gris y se agrega sombra al texto
- El texto de ubicación tenía un color demasiado claro y una fuente muy delgada, así que se cambia a un gris más oscuro
- Aunque se cumpla la relación de contraste, una fuente demasiado delgada puede ser difícil de leer, por lo que también hay que ajustar el peso por separado
8. No distinguir estados solo con color
- A los usuarios con alteraciones en la percepción del color les puede costar distinguir ciertas combinaciones de colores, o incluso no percibir el color en sí
- El significado, el estado o la posibilidad de interacción no deben comunicarse solo con color
- Si se quitaba el azul del enlace
Reviewsdel ejemplo, no se distinguía del texto común - Se cambia para que, al agregar un subrayado, pueda identificarse como enlace incluso si el color no se percibe
9. Usar una sola tipografía sans serif
- Una typeface es un conjunto de fuentes con un estilo común, como Helvetica, mientras que variaciones de tamaño y peso como bold/regular corresponden a fuentes individuales
- En interfaces, por lo general es seguro usar una sola tipografía sans serif que sea legible, neutral y simple
- La tipografía serif decorativa del título en el ejemplo era difícil de leer y podía no combinar con las fotos del alojamiento o el tono del servicio
- Se unifica con la misma tipografía sans serif del cuerpo para mejorar la usabilidad y la consistencia visual
10. Elegir una tipografía con x-height grande
- Una tipografía con una x-height grande, que representa la altura de las minúsculas, y suficiente espaciado entre letras suele ser fácil de leer incluso en tamaños pequeños
- League Spartan en el ejemplo tenía una x-height relativamente baja
- Se cambia a Inter, que tiene una x-height mayor, para mejorar la legibilidad del texto pequeño del cuerpo
11. Limitar el uso de mayúsculas
- Las personas tienden a leer rápido reconociendo la forma completa de las palabras más que cada letra individual
- Las palabras escritas solo en mayúsculas adoptan una forma rectangular muy similar entre sí, lo que obliga a verificar las letras una por una y dificulta la lectura
- La información de ubicación se cambia de mayúsculas completas a sentence case, donde solo la primera palabra y los nombres propios llevan mayúscula
- Las mayúsculas completas deben usarse de forma limitada, salvo en expresiones cortas donde el énfasis sea realmente necesario
12. Usar solo pesos regular y bold
- Aunque una tipografía ofrezca muchos pesos, usarlos todos aumenta el ruido visual en la pantalla y dificulta mantener la consistencia
- Conviene mantener simple el sistema de diseño alrededor de regular y bold
- Usar bold para títulos y texto destacado
- Usar regular para texto común pequeño
- Si bold se ve demasiado pesado, puede reemplazarse por semi-bold
- Los pesos muy delgados o muy gruesos deben limitarse a títulos grandes, no a texto pequeño
- El texto de ubicación del ejemplo usaba un peso light, por lo que podía seguir siendo difícil de leer incluso después de aumentar el contraste
- Se cambia a regular para mejorar la legibilidad y reducir la variedad de pesos usados
13. Evitar texto negro puro
- El negro puro genera un contraste muy alto con el fondo blanco, lo que puede aumentar la fatiga visual durante lecturas prolongadas
- Sobre un fondo blanco, es más seguro usar gris oscuro en lugar de negro puro
- Se cambian varios elementos negros del ejemplo a gris oscuro para ajustar la legibilidad
- A la descripción del alojamiento, que destacaba demasiado para su importancia, se le aplica un gris más claro para bajar su jerarquía visual
14. Alinear a la izquierda los textos largos
- El inglés se lee de izquierda a derecha y existe una tendencia a escanear la pantalla en forma de F, por lo que la alineación izquierda es la más estable
- Los títulos o frases cortas pueden leerse rápido aunque estén centrados
- Si un cuerpo de texto largo se centra, la posición inicial cambia en cada línea y se vuelve difícil encontrar la siguiente línea
- La alineación justificada y centrada puede dificultar la lectura de textos largos, especialmente para usuarios con discapacidades cognitivas
- La descripción del alojamiento del ejemplo se cambia de alineación centrada a alineación izquierda, asegurando también consistencia con el texto superior
15. Configurar la altura de línea del cuerpo en 1.5 o más
- La altura de línea es la distancia vertical entre dos líneas de texto
- Un interlineado adecuado ayuda a reducir la relectura de la misma línea y permite leer textos largos con más comodidad
- La altura de línea del texto de cuerpo debe ser de al menos 1.5 (150%), y en general el rango adecuado es de 1.5 a 2
- En el ejemplo, la altura de línea se aumenta de 1 (100%) a 1.5 (150%) para mejorar la legibilidad
Resultado de los cambios y principios aplicados
- Al aplicar secuencialmente 16 reglas, la pantalla compleja se transforma en una versión más simple, legible y accesible
- La decoración acorde a la personalidad de la marca puede agregarse después, pero primero hay que corregir aspectos básicos como estructura de la información, distinción de interacciones, relación de contraste y tipografía
- Usar reglas objetivas en lugar de gustos subjetivos permite diseñar más rápido una UI intuitiva y accesible
- Las reglas aplicadas repetidamente se vuelven gradualmente una base natural del flujo de trabajo de diseño, y sobre ellas se pueden experimentar nuevas formas de expresión y decoración
Aún no hay comentarios.