Un estudio de caso de diseño de UI paso a paso para corregir rápidamente una interfaz de usuario de ejemplo utilizando consejos de diseño de UI basados en la lógica.
El diseño de la interfaz de usuario es difícil.Con tantas opciones de diseño, espaciado, tipografía y color, tomar decisiones de diseño puede ser abrumador. Si a esto le sumamos usabilidad, accesibilidad y psicología, la cosa se complica aún más.
Afortunadamente, el diseño de UI no tieneser tan difícil. Durante casi dos décadas trabajando como diseñador de productos, me he dado cuenta de que la mayoría de mis decisiones de diseño visual y de interacción se rigen por un sistemade pautas lógicas. No se trata de talento artístico ni intuición mágica, sino de pautas sencillas.
Claro que el talento artístico ayuda, pero gran parte de lo que conforma un diseño de interfaz intuitivo, accesible y atractivo se puede aprender. Tener un sistema de directrices lógicas ayuda a tomar decisiones de diseño informadas y eficientes. Sin un sistema lógico, solo se usa la intuición para cambiar elementos hasta que queden bien.
La forma más rápida de aprender es haciendo, así que comencemos con los consejos de diseño de UI.
Consejos de diseño de UI para arreglar una interfaz de ejemplo
Los siguientes dos diseños corresponden a la página de detalles de la propiedad de una aplicación de alquileres vacacionales. El primero es el diseño original. El segundo es el resultado de aplicar algunas directrices lógicas.
Incluso sin mucha experiencia en diseño visual o de interacción, probablemente notarás que el diseño original se siente desordenado, complicado y difícil de usar. Esto se debe a que contiene muchos detalles problemáticos que ponen en riesgo la usabilidad. ¿Quizás ya hayas identificado algunos?
Solucionemos los problemas con el diseño original uno a uno usando los siguientes consejos de diseño de UI:
- Utilice el espacio para agrupar elementos relacionados
- Sé consistente
- Asegúrese de que los elementos de apariencia similar funcionen de manera similar
- Crear una jerarquía visual clara
- Eliminar estilos innecesarios
- Utilice el color con un propósito
- Asegúrese de que los elementos de la interfaz tengan una relación de contraste de 3:1
- Asegúrese de que el texto tenga una relación de contraste de 4,5:1
- No confíes únicamente en el color como indicador
- Utilice una única tipografía sans serif
- Utilice un tipo de letra con letras minúsculas más altas
- Limitar el uso de mayúsculas
- Utilice únicamente pesos de fuente regulares y en negrita
- Evite el texto completamente negro
- Alinear texto a la izquierda
- Utilice al menos 1,5 líneas de altura para el cuerpo del texto.
1. Utilice el espacio para agrupar elementos relacionados
Dividir la información en grupos más pequeños de elementos relacionados ayuda a estructurar y organizar una interfaz. Esto facilita y agiliza la comprensión y la memorización.
Puede agrupar elementos relacionados utilizando los siguientes métodos:
- Coloque elementos relacionados en el mismo contenedor
- Elementos relacionados con el espacio muy juntos
- Hacer que los elementos relacionados se vean similares
- Alinear elementos relacionados en una línea continua
El uso de contenedores es la mejor manera de agrupar elementos de la interfaz, pero puede añadir un desorden innecesario. Busque oportunidades para usar otros métodos de agrupación; suelen ser más sutiles y pueden ayudar a simplificar los diseños.
Usar el espacio, en particular, es una forma muy eficaz y sencilla de agrupar elementos relacionados. También puedes combinar métodos de agrupación para mostrar las agrupaciones con mayor claridad.
En nuestro ejemplo, la falta de espacio entre el contenido hace que el diseño parezca recargado y difícil de entender. Aumentar el espacio ayuda a agrupar el contenido con claridad, haciéndolo más organizado y fácil de entender.
2. Sé consistente
La consistencia en el diseño de la interfaz de usuario (UI) implica que elementos similares se ven y funcionan de forma similar. Esto debería ser así tanto dentro del producto como al compararlo con otros productos consolidados. Esta funcionalidad predecible mejora la usabilidad y reduce los errores, ya que los usuarios no necesitan aprender constantemente cómo funcionan las cosas.
En nuestro ejemplo, los estilos de los iconos son inconsistentes, ya que algunos están rellenos y otros no. Esto podría confundir a algunos usuarios, ya que los iconos rellenos suelen indicar que un elemento está seleccionado. Delinear todos los iconos con un grosor de trazo de 2 puntos y esquinas redondeadas mejora la consistencia y proporciona a cada icono un grosor visual similar.
También se agregan etiquetas de texto a los íconos para ayudar a garantizar que las personas puedan entender lo que significan, especialmente aquellos que usan lectores de pantalla (software que describe una interfaz, usando voz o braille, a alguien que no puede verla).
3. Asegúrese de que los elementos de apariencia similar funcionen de manera similar
Si los elementos se parecen, se esperará que funcionen de forma similar. Por lo tanto, procura usar un tratamiento visual uniforme para los elementos con la misma funcionalidad. Por el contrario, procura que los elementos con funcionalidades diferentes se vean diferentes.
En nuestro ejemplo, los contenedores de iconos tienen un estilo visual similar al del botón "Reservar ahora". Esto les da la impresión de ser interactivos, aunque no lo sean. Eliminar el color azul y el estilo de los botones de los iconos ayuda a evitar que se confundan con elementos interactivos.
4. Crea una jerarquía visual clara
No toda la información de una interfaz tiene el mismo nivel de importancia. Procura presentar la información en orden de importancia, resaltando los elementos más importantes.
Un orden de importancia claro, o jerarquía visual, ayuda a las personas a analizar la información rápidamente y a centrarse en las áreas de interés. También mejora la estética al crear una sensación de orden. Se puede crear una jerarquía visual clara mediante variaciones de tamaño, color, contraste, espaciado, posición y profundidad.
A continuación se muestra un ejemplo de un banner destacado de un sitio web sin una jerarquía visual clara, seguido de uno con elementos claramente presentados en orden de importancia.
Una forma rápida y sencilla de comprobar si tu jerarquía visual es clara es usar la Prueba de Estrabismo. Simplemente entrecierra los ojos y observa tu diseño. También puedes alejarte de la pantalla o desenfocar el diseño. Deberías poder identificar los elementos más importantes y reconocer la función de la interfaz.
Apliquemos la prueba del estrabismo a nuestro ejemplo. Vemos que hay varios elementos con una prominencia similar que compiten por la atención. Mientras tanto, la acción principal en la esquina inferior izquierda no destaca en absoluto.
La acción principal suele ser el elemento más destacado de una interfaz. Un color de fondo de alto contraste y una fuente en negrita ayudan a conseguirlo. Esto también soluciona un problema de accesibilidad con el botón de bajo contraste, que veremos más adelante.
Aplicando la prueba del estrabismo al diseño actualizado, la acción principal es claramente el elemento más destacado.
La jerarquía visual ahora es más clara, pero aún se puede mejorar. Por ejemplo, el cuerpo del texto sigue siendo demasiado prominente en relación con su importancia. Pronto aprenderemos algunas pautas tipográficas rápidas que ayudarán a corregir la jerarquía visual.
5. Eliminar estilos innecesarios
La información y los estilos visuales innecesarios pueden distraer y aumentar la carga cognitiva (la capacidad mental necesaria para usar una interfaz). Evite líneas, colores, fondos y animaciones innecesarios para crear una interfaz más sencilla y enfocada.
En nuestro ejemplo, el espacio en blanco y los bordes alrededor de la imagen añaden una complejidad visual innecesaria. No son necesarios para transmitir información ni agrupar elementos, por lo que podemos eliminarlos sin problemas para simplificar el diseño.
6. Utilice el color con un propósito
Use el color con moderación y con un propósito. Evite usar el color solo con fines decorativos, ya que puede ser confuso y distraer. Empiece con el blanco y negro e introduzca el color donde transmita significado.
Un enfoque sencillo y eficaz es aplicar el color de la marca a elementos interactivos, como enlaces de texto y botones. Esto ayuda a comprender qué es interactivo y qué no. Evite usar el color de la marca en elementos no interactivos.
No es necesario añadir color a todos los elementos interactivos, ya que algunos ya cuentan con señales visuales que indican su interacción. Por ejemplo, las tarjetas del siguiente ejemplo siguen dando la sensación de ser interactivas, con o sin el enlace azul.
En nuestro ejemplo original, el encabezado azul podría verse bien, pero hace que el texto parezca interactivo. Para evitar confusiones, eliminamos el color azul del encabezado, ya que no es interactivo.
También eliminamos el color azul de otros elementos no interactivos, como la calificación de estrellas. Esto facilita mucho la identificación de elementos interactivos y no interactivos.
7. Asegúrese de que los elementos de la interfaz tengan una relación de contraste de 3:1
El contraste mide la diferencia de brillo percibido entre dos colores. Se expresa en una proporción que va de 1:1 a 21:1. Por ejemplo, el texto negro sobre un fondo negro tiene la proporción de contraste más baja (1:1), mientras que el texto negro sobre un fondo blanco tiene la proporción más alta (21:1). Existen muchas herramientas y plugins de Figma para medir el contraste de color; mis favoritos son la
herramienta de comprobación de contraste en línea Web AIM y el
plugin Contrast de Figma.
Para garantizar que las personas con discapacidad visual puedan ver claramente los detalles de la interfaz, procure cumplir al menos con los requisitos de contraste de color de nivel AA de las
Pautas de Accesibilidad al Contenido Web (WCAG) 2.1. Esto significa que los elementos de la interfaz de usuario, como los campos de formulario y los botones, deben tener una relación de contraste de al menos 3:1.
En nuestro ejemplo, el contraste del icono de la flecha en la foto es demasiado bajo. Al usar un color gris para el icono y añadir un fondo blanco sólido, se consigue un contraste 3:1 suficiente, independientemente de la foto en la que se encuentre. Esto también reduce el coste de interacción, ya que el área de toque del icono ahora es más grande y claramente visible.
El contraste del botón principal en el ejemplo original también era demasiado bajo. Lo corregimos previamente al abordar la jerarquía visual, pero también vale la pena mencionarlo aquí.
El riesgo de usar un botón de bajo contraste es que las personas con baja visión podrían no identificarlo como tal, ya que no pueden distinguir su forma. Aumentar la relación de contraste del botón por encima de 3:1 lo hace accesible y también ayuda a corregir la jerarquía visual. Obtenga más consejos de diseño de botones para evitar errores comunes.
Al aumentar el contraste del icono de flecha y del botón a una proporción superior a 3:1, obtenemos el siguiente diseño. Estamos avanzando poco a poco, pero aún tenemos más problemas que solucionar.
8. Asegúrese de que el texto tenga una relación de contraste de 4,5:1
Para garantizar que las personas con discapacidad visual puedan leer el texto con claridad, este debe cumplir con los siguientes requisitos de contraste de nivel AA de WCAG 2.1:
- El texto pequeño (18 px o menos) necesita un contraste mínimo de 4,5:1.
- El texto grande (superior a 18 px con peso en negrita o superior a 24 px con peso normal) necesita un contraste mínimo de 3:1.
En nuestro ejemplo, el texto pequeño del elemento de recuento de fotos tiene un contraste insuficiente. Aumentamos la relación de contraste por encima de 4,5:1 aumentando la opacidad del contenedor gris y añadiendo una sombra de texto.
El contraste del texto de ubicación también es demasiado bajo. El grosor de la fuente dificulta aún más la lectura. Usar un tono de gris más oscuro ayuda a que el texto sea más accesible. Actualizaremos el texto para mejorarlo próximamente.
9. No confíes solo en el color como indicador
Existen muchos tipos de daltonismo y afectan principalmente a los hombres. Comúnmente, las personas daltónicas tienen dificultad para distinguir entre el rojo y el verde, pero algunas no pueden ver ningún color.
Para garantizar que una interfaz sea accesible para personas daltónicas, no se puede confiar únicamente en el color para transmitir el significado o distinguir elementos visuales. Es necesario utilizar señales visuales adicionales para diferenciar los elementos de la interfaz.
En nuestro ejemplo, el color azul se usa en el texto "reseñas" para indicar que se trata de un enlace. Si se elimina el color, el texto del enlace se ve igual que el resto del texto, por lo que quienes no distinguen el color no podrán distinguirlo. Subrayar el texto del enlace lo diferencia claramente del resto del texto en ausencia de color.
10. Utilice una única tipografía sans serif
Una tipografía es un conjunto de fuentes relacionadas con un estilo o estética similar. Helvética es un ejemplo de tipografía. Las fuentes son variaciones dentro de una tipografía, como grosores o tamaños. Por ejemplo, Helvética negrita y Helvética regular son dos fuentes diferentes dentro de la tipografía Helvética.
Lo más seguro es utilizar una única tipografía sans serif para el diseño de la interfaz, ya que generalmente son las más legibles, neutrales y simples.Aquí están mis 10 tipografías gratuitas favoritas para el diseño de UI.
En nuestro ejemplo, el encabezado utiliza una tipografía serif detallada que es un poco difícil de leer y podría distraer a algunos.También tiene una personalidad que podría no coincidir con algunas de las fotos de esta aplicación de alquiler de propiedades.Simplificarlo a una tipografía sans serif, como la que se usa para el cuerpo del texto, puede ayudar a mejorar la usabilidad y la estética.
11. Utilice un tipo de letra con letras minúsculas más altas.
Busque tipografías con letras minúsculas más altas y 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.
En nuestro ejemplo, utilizamos la tipografía League Spartan, que tiene una altura de x relativamente baja. Cambiarla por una con una altura de x mayor, como Inter, mejora la legibilidad.
Así es como se ve nuestro ejemplo después de actualizar el tipo de letra de League Spartan a Inter.
12. Limite el uso de mayúsculas
A menos que les grites, no hay muchas razones válidas para usar mayúsculas. Es ruidoso y difícil de leer.
Al leer, 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. Todas las palabras en mayúscula tienen la misma forma rectangular. Esto te obliga a leer cada letra por separado.
En nuestro ejemplo, el texto de ubicación se escribe en mayúsculas. Cambiarlo a mayúscula oracional, donde solo se escriben con mayúscula la primera palabra y los nombres propios (nombres de personas, lugares o cosas), mejora la legibilidad.
13. Utilice únicamente pesos de fuente regulares y en negrita.
El hecho de que existan muchos grosores de fuente disponibles no significa que deba usarlos todos en sus diseños de interfaz de usuario. Usar muchos grosores de fuente diferentes puede añadir ruido y desorden a su interfaz. Además, dificulta el uso consistente de cada grosor de fuente.
Mantenga su sistema de diseño simple y conciso utilizando únicamente grosores de fuente regulares y negrita. Algunas tipografías tienen una opción de seminegrita que puede usar en lugar de negrita si esta última es demasiado negrita.
Consejos rápidos de uso:
- Utilice fuente en negrita para los títulos a fin de enfatizarlos.
- Utilice un peso de fuente normal para otros textos más pequeños.
- Si decide utilizar fuentes muy delgadas o gruesas, resérvelas para títulos y textos más grandes, ya que pueden resultar difíciles de leer en tamaños más pequeños.
En nuestro ejemplo, el texto de ubicación usa una fuente ligera. Aunque aumentamos el contraste por encima de la relación de contraste requerida de 4,5:1, los caracteres delgados podrían resultar difíciles de leer para algunas personas. Aumentar el grosor de la fuente a normal mejora la legibilidad y simplifica el diseño.
14. Evite el texto completamente negro
Para el diseño de interfaz de usuario (UI), generalmente es más seguro evitar el negro puro, ya que tiene un contraste muy alto con el blanco. Este alto contraste puede causar fatiga visual al leer texto.
El negro tiene un 0 % de brillo y el blanco un 100 %. La gran diferencia de brillo hace que nuestros ojos trabajen más. Lo más seguro es evitar el negro puro contra el blanco y optar por un gris oscuro.
En nuestro ejemplo, se usa negro puro en varios elementos. Cambiarlo a gris oscuro mejora la legibilidad. Anteriormente, al analizar la jerarquía visual, observamos que el texto de descripción de la propiedad era demasiado prominente. Para asegurar que los elementos de la interfaz se presenten en orden de importancia, usamos un gris más claro para el texto de descripción de la propiedad y así disminuir su prominencia.
15. Alinear el texto a la izquierda
El inglés se lee de izquierda a derecha, de abajo a arriba, en forma de F. Por lo tanto, es mejor mantener el texto alineado a la izquierda para una legibilidad óptima. Para textos extensos, es mejor evitar el texto alineado al centro o justificado. Es más difícil de leer, especialmente para personas con discapacidades cognitivas.
La alineación centrada puede funcionar para encabezados y textos cortos, ya que se leen rápidamente. Sin embargo, dificulta la lectura de textos más largos, ya que el punto de inicio de cada línea cambia constantemente. La vista necesita más esfuerzo para encontrar el punto de inicio de cada línea.
En nuestro ejemplo, el texto de descripción de la propiedad está centrado. Alinearlo a la izquierda mejora la legibilidad y es coherente con el texto alineado a la izquierda anterior.
16. Utilice al menos 1,5 líneas de altura para el cuerpo del texto.
La altura de línea es la distancia vertical entre dos líneas de texto. El espacio entre líneas evita que se vuelva a leer la misma línea. Además, ofrece una lectura más cómoda.
Para facilitar la accesibilidad y la legibilidad, especialmente en textos extensos, asegúrese de que la altura de línea sea de al menos 1,5 (150%). Mantener una altura de línea entre 1,5 y 2 suele ser una buena opción.
En nuestro ejemplo, la altura de línea es solo 1 (100%). Aumentarla a 1,5 (150%) mejora la legibilidad.
¡Lo arreglamos!
Con unos sencillos pero eficaces consejos de diseño de interfaz de usuario, detectamos y solucionamos rápidamente numerosos problemas con nuestro diseño de interfaz de usuario de ejemplo. Si fuera necesario, podríamos personalizar aún más los estilos visuales decorativos para que se adaptaran a la estética de la marca. Las directrices de diseño de interfaz de usuario pueden parecer restrictivas, pero no están pensadas para limitar tu creatividad. Considéralas una base sólida para construir, explorar y experimentar.
Espero que empieces a ver que el diseño de interfaces de usuario no tiene por qué ser tan difícil. Puede parecer un arte mágico, pero gran parte de él se basa en pautas lógicas como las que acabamos de aprender. Usar la lógica objetiva, en lugar de la opinión subjetiva, facilita y agiliza el diseño de interfaces intuitivas, accesibles y atractivas.
Fuente: traducido al español y tomado de Medium.com en inglés -
https://uxplanet.org/16-ui-design-tips-ba2e7524d203
Escrito por:
Adham Dannaway