En el dinámico mundo del desarrollo web, la interfaz de usuario (UI) es un componente crucial que define la relación entre los usuarios y el sitio web. La búsqueda constante de optimización y la aplicación de pautas lógicas son esenciales para asegurar que las interfaces no solo sean visualmente atractivas, sino también altamente funcionales.
En este artículo queremos presentar un extracto del libro “Practical UI” escrito por Adham Dannaway, experto en diseño de interfaces. En donde se muestra como mejorar un componente rediseñando sus estilos aplicando reglas lógicas para obtener resultados excepcionales.
Comencemos!
Los siguientes 2 diseños son para la página de detalles de propiedades de una aplicación de alquiler de propiedades a corto plazo. El de la izquierda es el diseño original. El de la derecha es el resultado de aplicar algunas reglas lógicas o pautas.
Aunque no tengas una gran experiencia en diseño visual o de interacción, es probable que percibas de inmediato que el diseño original da la sensación de ser confuso, complicado y poco práctico. Esto se debe a la inclusión de varios elementos de diseño problemáticos que plantean un riesgo para la facilidad de uso. ¿Puedes detectar algunos de estos detalles?
1. Aprovecha el espacio para agrupar elementos relacionados
Dividir la información en pequeños grupos de elementos relacionados es una manera de dar estructura y orden a una interfaz. Esto agiliza y simplifica la comprensión y memorización por parte de los usuarios.
Puedes unir elementos afines usando las siguientes estrategias:
- Reúne elementos relacionados en un mismo contenedor.
- Coloca elementos relacionados cerca uno de otro.
- Haz que elementos afines compartan una apariencia similar.
- Alinea elementos relacionados en una línea continua.
Si bien el uso de contenedores es una señal visual potente para agrupar elementos en la interfaz, a veces puede generar confusión innecesaria. Es recomendable explorar otras formas más sutiles de agrupación, ya que pueden simplificar los diseños.
Especialmente, el uso del espacio resulta muy eficaz y sencillo para agrupar elementos afines. También es posible combinar varios métodos de agrupación para resaltar claramente las asociaciones entre elementos.
En el ejemplo que se presenta, la falta de espacio entre los contenidos hace que el diseño se vea abarrotado y complicado de comprender. Aumentar los espacios ayuda a agrupar los contenidos de manera más definida, lo que resulta en una organización más clara y una comprensión más fluida.
2. Mantén la Uniformidad en el Diseño
En el ámbito del diseño de UI, la uniformidad se refiere a que elementos similares presenten una apariencia y funcionamiento coherentes. Esto debería aplicarse tanto dentro de tu producto como en comparación con otros productos establecidos en la industria. Esta coherencia predecible potencia la usabilidad y minimiza errores, ya que los usuarios no tienen que aprender constantemente cómo operan las funciones.
En el ejemplo que se presenta, los estilos de los íconos adolecen de uniformidad, dado que algunos están rellenados mientras que otros no lo están. Esto podría desconcertar a algunos usuarios, ya que los íconos rellenados suelen indicar que un elemento está seleccionado. Al trazar todos los íconos con un peso de línea de 2 puntos y esquinas redondeadas, logramos mejorar la uniformidad y conferir a cada ícono un peso visual similar.
También se incorporan etiquetas de texto a los íconos para garantizar que las personas puedan comprender su significado, en especial aquellos que utilizan lectores de pantalla (software que describe una interfaz a través de voz o braille, para usuarios con discapacidades visuales).
3. Asegura que elementos con apariencias similares funcionen de manera parecida
Cuando los elementos comparten una apariencia similar, las expectativas de los usuarios sugieren que también tendrán un funcionamiento parecido. Por lo tanto, procura mantener un tratamiento visual consistente en aquellos elementos que cumplen la misma función. En contraste, es importante que los elementos con funcionalidades distintas presenten aspectos diferentes.
En el caso que se analiza, los contenedores de íconos comparten un estilo visual parecido al botón “reservar ahora”. Esto crea la percepción de que son interactivos, incluso cuando no lo son. Eliminar el color azul y el estilo de botón de los íconos ayuda a evitar confusiones y a que no sean confundidos con elementos interactivos.
4. Establece una Jerarquía Visual Clara
No toda la información en una interfaz posee el mismo nivel de relevancia. El propósito es exponer la información en función de su importancia, otorgando un mayor protagonismo a los elementos más relevantes.
Una estructura visual evidente, que organice los elementos por su grado de importancia, permite a los usuarios escanear la información de manera eficiente y concentrarse en las áreas de interés. Además, mejora la estética al generar un sentido de orden. Puedes lograr una estructura visual clara mediante variaciones en tamaño, color, contraste, espaciado, posición y profundidad.
A continuación, podrás ver un ejemplo de un banner principal de un sitio web sin una estructura visual evidente, seguido de otro donde los elementos se presentan de manera clara en función de su importancia.
Una manera rápida y sencilla de evaluar si tu jerarquía visual es clara es a través de la Prueba del Entrecerrar los Ojos (The Squint Test). Simplemente entrecierra los ojos y observa tu diseño. Alternativamente, puedes alejarte de la pantalla o desenfocar tu diseño. Aun en estas condiciones, deberías ser capaz de identificar cuáles son los elementos más relevantes y reconocer el propósito de la interfaz.
Aplicando la Prueba del Entrecerrar los Ojos al ejemplo, podemos observar que varios elementos compiten por atención con un nivel de prominencia similar. Mientras tanto, la acción principal en la esquina inferior izquierda pasa completamente desapercibida.
La acción principal debe ocupar, por lo general, el lugar más prominente en una interfaz. Asignarle un color de fondo de alto contraste y un peso de fuente en negrita contribuye a alcanzar este propósito. Además, esto resuelve un problema de accesibilidad vinculado con el botón de contraste bajo, que examinaremos más adelante.
Al aplicar la Prueba del Entrecerrar los Ojos al diseño actualizado, la acción principal es claramente el elemento más destacado.
La estructura visual es ahora más nítida, pero aún existen oportunidades para perfeccionarla. Por ejemplo, el bloque de texto principal todavía ocupa un lugar demasiado destacado en comparación con su nivel de relevancia. En breve, exploraremos algunas directrices de tipografía que nos permitirán corregir esta jerarquía visual.
5. Elimina Estilos Innecesarios
Los detalles y estilos visuales que carecen de utilidad pueden desviar la atención y elevar la carga cognitiva (la cantidad de esfuerzo mental necesaria para interactuar con una interfaz). Abstente de utilizar líneas, colores, fondos y animaciones innecesarias para concebir una interfaz más sencilla y centrada en su propósito.
En el ejemplo, el espacio en blanco y los bordes alrededor de la imagen contribuyen a una complejidad visual innecesaria. No aportan información ni agrupan elementos, por lo que podemos prescindir de ellos para lograr una simplificación en el diseño.
6. Utiliza el Color de Manera Estratégica
Aplica el color de manera selectiva y con un propósito claro. Evita emplear el color únicamente con fines estéticos, ya que esto podría generar confusión y distracción. Comienza con una paleta en blanco y negro, y agrega color solo cuando este aporte significado.
Una estrategia simple y eficaz es aplicar el color de la marca a elementos interactivos, como enlaces de texto y botones. Esto ayuda a los usuarios a identificar qué es interactivo y qué no lo es. Procura evitar el uso del color de la marca en elementos no interactivos.
No es necesario incorporar color en todos los elementos interactivos, ya que algunos ya presentan señales visuales que indican su interactividad. Por ejemplo, las tarjetas en el siguiente ejemplo siguen transmitiendo una sensación de interactividad, ya sea con o sin el enlace de color azul.
En el ejemplo inicial, el título en azul podría resultar agradable visualmente, pero da la impresión de que el texto es interactivo. Para evitar cualquier confusión, se elimina el color azul del título, ya que este no tiene funcionalidad interactiva.
Asimismo, se remueve el color azul de otros elementos no interactivos, como la calificación por estrellas. Esta acción simplifica considerablemente la distinción entre lo interactivo y lo no interactivo.
7. Asegura un Relación de Contraste 3:1 en los Elementos de la Interfaz
El contraste representa la diferencia en brillo percibido entre dos colores. Se expresa como una proporción que oscila entre 1:1 y 21:1. Por ejemplo, el texto negro sobre fondo negro posee el ratio de contraste más bajo, 1:1, mientras que el texto negro sobre fondo blanco alcanza el mayor ratio, 21:1. Existen diversas herramientas en línea que facilitan medir los ratios de contraste entre colores distintos.
Con el objetivo de garantizar que las personas con discapacidades visuales puedan apreciar con claridad los detalles de la interfaz, es crucial cumplir al menos con los requisitos de contraste de color nivel AA establecidos en las Pautas de Accesibilidad al Contenido en la Web (WCAG) 2.1. Esto implica que los elementos de la interfaz de usuario, como los campos de formulario y los botones, deben presentar un ratio de contraste de al menos 3:1.
En el ejemplo, el contraste del ícono de flecha es insuficiente. Al agregar una sombra al ícono y una superposición de degradado en el tercio superior de la imagen, se logra que el ícono tenga un contraste de 3:1 adecuado, sin importar la imagen sobre la que se encuentre.
El contraste del botón principal en el ejemplo original también era insuficiente. Ya lo corregimos anteriormente al abordar la jerarquía visual, pero vale la pena destacarlo en este punto.
El problema con el botón de bajo contraste es que las personas con visión reducida podrían no reconocerlo como un botón, ya que no pueden percibir su forma. Al aumentar el ratio de contraste del botón por encima de 3:1, logramos que el botón sea accesible y también contribuimos a corregir la jerarquía visual.
Elevar el contraste de la flecha y del botón a un ratio superior a 3:1 nos conduce al siguiente diseño. Progresamos paso a paso, aunque aún hay otros problemas por resolver.
8. Asegura que el Texto Cumpla con un Contraste de 4.5:1
Con el propósito de garantizar que las personas con discapacidades visuales puedan leer el texto con claridad, es necesario satisfacer los requisitos de contraste del nivel AA según las Pautas de Accesibilidad al Contenido en la Web (WCAG) 2.1:
El texto pequeño (18px o menos) debe poseer un contraste mínimo de 4.5:1.
El texto grande (superior a 18px con peso en negrita o superior a 24px con peso regular) necesita un contraste mínimo de 3:1.
En el ejemplo, el texto pequeño en el elemento de recuento de fotos presenta un contraste insuficiente. Se mejora el ratio de contraste por encima de 4.5:1 al aumentar la opacidad del contenedor gris y agregar una sombra al texto.
El contraste del texto de la ubicación resulta insuficiente. El delgado peso de la fuente complica aún más su legibilidad. Emplear una tonalidad de gris más oscuro contribuye a hacer que el texto sea más accesible. En los próximos pasos, implementaremos más mejoras en el texto para optimizarlo.
9. No Confíes Exclusivamente en el Color como Indicador
Existen diversos tipos de daltonismo, siendo los hombres los más afectados. Por lo general, las personas con daltonismo tienen dificultades para distinguir entre el rojo y el verde, pero algunos no pueden percibir ningún color en absoluto.
Para asegurarte de que una interfaz sea accesible para quienes padecen daltonismo, no puedes confiar únicamente en el color para transmitir significados o diferenciar elementos visuales. Necesitas utilizar indicadores visuales adicionales para distinguir los elementos de la interfaz.
En el ejemplo, el color azul se emplea en el texto de “reseñas” para indicar que se trata de un enlace. Si se elimina el color, el texto del enlace se ve igual que otros textos, y las personas con daltonismo no pueden percibirlo como un enlace. Al subrayar el texto del enlace, se establece una diferenciación clara respecto a otros textos en ausencia de color.
10. Opta por una Única Tipografía Sans Serif
Una tipografía se compone de un conjunto de fuentes relacionadas con un estilo o estética similar. Helvetica es un ejemplo de tipografía. Las fuentes son variaciones dentro de una tipografía, como los pesos o los tamaños. Por ejemplo, Helvetica en negrita y Helvetica regular son dos fuentes diferentes dentro de la tipografía Helvetica.
En el diseño de interfaces, lo más recomendable es utilizar una única tipografía sans serif, ya que suelen ser las más legibles, neutrales y sencillas.
En el ejemplo, el encabezado emplea una tipografía con detalles de serif que puede dificultar su lectura y, en algunos casos, distraer. Además, su personalidad podría no concordar con algunas de las imágenes en esta aplicación de alquiler de propiedades. Simplificarlo mediante una tipografía sans serif puede mejorar tanto la usabilidad como la estética.
11. Elige una Tipografía con Letras Minúsculas Más Elevadas
Busca tipografías que ofrezcan letras minúsculas de mayor altura y un mayor espacio entre letras, ya que suelen ser más legibles en tamaños pequeños. La altura de las letras minúsculas en una tipografía se conoce como altura x (x-height).
En el caso de ejemplo, se emplea la tipografía Gill Sans, que presenta una altura x relativamente baja. Modificar la tipografía por una con una altura x más amplia, como Lato, resulta beneficioso para potenciar la legibilidad.
A continuación, se muestra cómo se ve el ejemplo después de haber actualizado la tipografía de Gill Sans a Lato.
12. Restringe el Uso de Mayúsculas
A menos que estés gritando a alguien, no existen muchas razones válidas para emplear letras en mayúscula. ¡RESULTA LLAMATIVO Y DIFÍCIL DE LEER!
Al leer, se observa la forma de una palabra en lugar de analizar cada letra por separado. La forma facilita el reconocimiento rápido de la palabra. Las palabras en mayúsculas comparten todas la misma forma rectangular. Esto implica leer cada letra una por una.
En el ejemplo, el texto de la ubicación está en mayúsculas. Al modificarlo al formato de oración, donde solo la primera palabra y los nombres propios (como nombres de personas, lugares o cosas) llevan mayúscula, logramos mejorar la legibilidad.
13. Emplea Exclusivamente Pesos de Fuente Regular y en Negrita
No es necesario utilizar todos los pesos de fuente disponibles en una tipografía en tus diseños. Incorporar una gran variedad de pesos de fuente puede generar confusión y desorden en la interfaz. Además, dificulta mantener una coherencia en el uso de cada peso de fuente.
Simplifica y optimiza tu sistema de diseño utilizando solamente los pesos de fuente regular y en negrita.
Consejos Rápidos para el Uso de Fuentes:
- Utiliza un peso de fuente en negrita para destacar los encabezados.
- Emplea un peso de fuente regular para otros textos más pequeños.
- Si optas por utilizar pesos de fuente muy delgados o gruesos, úsalos solo en los encabezados y textos de mayor tamaño, ya que pueden ser complicados de leer en tamaños más pequeños.
En el ejemplo, el texto de ubicación usa un peso de fuente ligero. Aunque se ha aumentado el contraste por encima del ratio de contraste requerido de 4.5:1, los caracteres delgados podrían seguir siendo difíciles de leer para algunas personas. Incrementar el peso de la fuente a regular ayuda a mejorar la legibilidad y simplifica el diseño.
14. Evita el Uso de Texto en Negro Puro
Dentro del diseño de interfaz, resulta más seguro evitar el uso de negro puro, dado que presenta un contraste muy elevado contra el blanco. Este alto contraste puede generar fatiga visual y cansancio al leer texto.
El negro tiene un brillo de color del 0%, mientras que el blanco posee un brillo de color del 100%. Esta gran disparidad en el brillo de color exige un mayor esfuerzo por parte de nuestros ojos. Lo más recomendable es evitar el negro puro en combinación con el blanco y en su lugar, optar por un gris oscuro.
En el ejemplo, el negro puro se emplea en diversos elementos. Cambiarlo por un gris oscuro contribuye a mejorar la legibilidad. Tal como se señala previamente al analizar la jerarquía visual, el texto de la descripción de la propiedad tenía un protagonismo excesivo. Para asegurar que los elementos de la interfaz se presenten en orden de importancia, se utiliza un gris más claro para el texto de la descripción de la propiedad y disminuye su prominencia.
15. Alineación a la Izquierda para una Óptima Legibilidad
Por lo general se lee de izquierda a derecha y de arriba hacia abajo en un patrón en forma de F. Por lo tanto, resulta más adecuado mantener el texto alineado a la izquierda para garantizar una legibilidad óptima. Para textos extensos, es recomendable evitar la alineación al centro o el justificado. Estas opciones dificultan la lectura, especialmente para personas con discapacidades cognitivas.
La alineación al centro puede ser útil para encabezados y textos breves, ya que se pueden leer rápidamente. Sin embargo, esta alineación complica la lectura de textos más largos, ya que el punto de inicio de cada línea cambia constantemente. Tus ojos deben trabajar más para encontrar el punto de inicio de cada línea.
En el caso de ejemplo, el texto de la descripción de la propiedad se encuentra alineado al centro. Al alinear el texto a la izquierda, no solo se mejora la legibilidad, sino que también se mantiene la coherencia con el texto alineado a la izquierda que se encuentra arriba.
16. Emplea un Interlineado de al menos 1.5 para el Texto Principal
El interlineado se refiere a la distancia vertical entre dos líneas de texto. El espacio entre las líneas evita que las personas tengan que volver a leer la misma línea de texto. Además, otorga una apariencia y sensación más cómoda durante la lectura.
Para mejorar la accesibilidad y legibilidad, especialmente en textos extensos, asegúrate de que el interlineado sea de al menos 1.5 (150%). Mantener el interlineado en un rango de entre 1.5 y 2 suele funcionar de manera efectiva.
En el caso de ejemplo, el interlineado es solamente de 1 (100%). Al incrementarlo a 1.6 (160%), logramos mejorar la legibilidad.
Y listo!
Con un conjunto de directrices de diseño de interfaz simples pero impactantes, se ha detectado y solventado con celeridad una serie de problemas en el diseño de ejemplo.
Con lo anterior se ha demostrado que el diseño de interfaces de usuario es una mezcla de arte y ciencia. A través de simples pero efectivas pautas, hemos aprendido cómo transformar diseños caóticos en interfaces coherentes y atractivas. Desde la alineación del texto y el uso inteligente de colores hasta la jerarquía visual, cada decisión cuenta para mejorar la usabilidad y la estética. Mantener la accesibilidad, la consistencia y la simplicidad como pilares fundamentales en el diseño web te guiará hacia la creación de experiencias digitales memorables y efectivas.