14 consejos de diseño de interfaz basados en lógica para mejorar cualquier interfaz
Consejos de diseño de interfaz para mejorar tus diseños de interfaz utilizando lógica en lugar de intuición.
Diseñar interfaces de usuario no es una tarea fácil. Con innumerables opciones sobre disposición, espaciado, tipografía y color, es fácil sentirse abrumado. Y cuando se suman consideraciones como usabilidad, accesibilidad y psicología humana, el desafío solo crece.
Pero aquí está la buena noticia, el diseño de interfaces de usuario no tiene que sentirse tan complejo. Después de más de 20 años como diseñador de productos, he encontrado que la mayoría de mis decisiones de diseño visual e interactivo están guiadas por un conjunto claro de directrices lógicas. No por genio artístico o instinto, sino por directrices sencillas.
Por supuesto, el talento creativo es útil, pero gran parte de lo que hace que una interfaz sea intuitiva, inclusiva y visualmente agradable puede aprenderse absolutamente. Tener un enfoque estructurado te permite tomar decisiones de diseño inteligentes y consistentes. Sin ello, básicamente dependes de prueba y error para hacer que las cosas “se vean bien”.
Y la mejor manera de aprender es haciendo. Así que comencemos a aplicar algunos consejos de diseño de interfaz. Todos los consejos de diseño son de mi libro de diseño de interfaz práctico.
Consejos de diseño de interfaz para corregir una interfaz de ejemplo
El siguiente diseño es para la página de perfil de una plataforma de blogs comunitarios. El primer ejemplo es el diseño original. El segundo es el resultado de aplicar rápidamente algunos consejos de diseño de interfaz basados en lógica.
Incluso si no tienes mucha experiencia en diseño de interfaz, probablemente puedas darte cuenta de que el diseño original simplemente no se siente “correcto”. Esto se debe a que contiene una serie de errores de diseño que pueden afectar negativamente la usabilidad. Es posible que ya hayas notado algunos de ellos.
Ahora, vamos a repasar el proceso de mejorar el diseño original, abordando cada problema paso a paso con estos consejos de diseño de interfaz:
1. Espacia los elementos en función de su relación
La cantidad de espacio entre los elementos de la interfaz debe depender de lo estrechamente relacionados que estén los elementos. Los elementos más estrechamente relacionados deben estar generalmente más cerca unos de otros para mostrar que están relacionados. Los elementos no relacionados deben separarse colocando más espacio entre ellos.
Usar el espacio de esta manera es uno de los métodos más poderosos para dividir la información en grupos más pequeños. Si piensas en cada grupo como un rectángulo, empezarás a notar que las interfaces están compuestas por muchos rectángulos pequeños dentro de otros más grandes. Comienza aplicando un espacio pequeño a los rectángulos más internos y aumenta gradualmente el espacio entre los rectángulos a medida que te mueves hacia afuera.
Decidir sobre el espacio ideal entre los elementos de la interfaz puede ser una tarea frustrante y que consume tiempo. Hay infinitas opciones entre las que elegir. En lugar de usar prueba y error, un píxel a la vez, crea un conjunto simple de opciones de espacio predefinidas para tomar decisiones más rápido.
Establece opciones de espacio simples basadas en incrementos de 8 puntos. Esto también se conoce como usar una cuadrícula de 8 puntos, ya que todos los elementos de la interfaz terminarán alineándose a una serie de guías verticales y horizontales separadas por 8 puntos. Para interfaces más detalladas, podrías usar incrementos de 4 puntos para un poco más de control.
Al igual que una escala tipográfica, tus opciones de espacio deben crecer en cantidades más grandes a medida que se hacen más grandes. Esto garantiza que el espacio sea proporcional para los elementos de interfaz más grandes.
En nuestro ejemplo, solo se usan las opciones de espacio predefinidas extra pequeño (8pt) y pequeño (16pt) entre los rectángulos, independientemente de lo estrechamente relacionados que estén. Esto resulta en un diseño que se ve abarrotado, comprimido y difícil de entender. Aumentar el espacio entre los elementos en función de lo estrechamente relacionados que estén ayuda a separar y agrupar claramente el contenido.
Así es como se ve nuestro ejemplo antes y después de aplicar las opciones de espacio predefinidas.
2. Asegúrate de que los elementos de la interfaz tengan una relación de contraste de 3:1
El contraste es una medida de la diferencia en el brillo percibido entre dos colores. Se expresa como una relación que va de 1:1 a 21:1. Por ejemplo, el texto negro sobre un fondo negro tiene la relación de contraste más baja de 1:1, mientras que el texto negro sobre un fondo blanco tiene la relación más alta de 21:1. Hay muchas herramientas y complementos de Figma para ayudarte a medir el contraste de color, mis favoritos son la herramienta de verificación de contraste en línea de Web AIM y el complemento de contraste de Figma.
Con el fin de ayudar a garantizar que las personas con discapacidades visuales puedan ver claramente los detalles de la interfaz, trata de cumplir al menos con los Lineamientos de Accesibilidad de Contenido Web (WCAG) 2.1 nivel AA de requisitos de contraste de color. Esto significa que los elementos de la interfaz de usuario, como los campos de formulario y los botones, deben tener al menos una relación de contraste de 3:1.
En nuestro ejemplo, el contraste de los iconos y los botones es demasiado bajo. El riesgo con los botones de bajo contraste es que las personas con baja visión no los identifiquen como botones, ya que no pueden ver la forma del botón. Agregar un borde con suficiente contraste a los botones los hace accesibles. También se elimina el relleno de fondo gris claro de los botones, para que las personas no los confundan con estar deshabilitados o inactivos. El bajo contraste de los iconos se corrige fácilmente usando un tono más oscuro de gris.
3. Usa un solo botón principal para la acción más importante
Para la mayoría de proyectos de sitios web o aplicaciones, necesitarás 3 pesos de botones para indicar la importancia de las acciones: principal, secundaria y terciaria. También podrías necesitar tamaños de botones más pequeños y/o más grandes dependiendo de la complejidad de la interfaz.
Los siguientes estilos de botones son familiares, accesibles y tienen una jerarquía visual clara que no depende solo del color. No son la única manera de estilizar botones, pero son una opción segura. Aprende más consejos de diseño de botones para evitar errores comunes.
El propósito de un botón principal es resaltar la acción más importante en una interfaz. Esto ayuda a las personas a entender qué deben hacer a continuación para completar su tarea.
Directrices para usar botones principales:
- Si no hay una sola acción más importante en una interfaz, usa botones secundarios o terciarios para esas acciones.
- Evita usar múltiples botones principales en una pantalla. Pueden competir por atención y causar confusión sobre qué hacer a continuación.
En nuestro ejemplo, supongamos que la acción de “seguir” es la más importante y la hacemos un botón principal.
4. Asegúrate de que los botones tengan un tamaño de destino suficiente
Los objetivos pequeños son más difíciles de hacer clic o tocar que los grandes. Esto es especialmente cierto para quienes tienen un control motor deteriorado, o incluso alguien sosteniendo su teléfono con una mano y usando el pulgar.
Trata de seguir las siguientes directrices para asegurarte de que los botones (y otros elementos interactivos) tengan un tamaño de destino suficiente:* Haga que los botones tengan al menos 48 pt por 48 pt de tamaño. Esto se alinea con una cuadrícula de 8 pt y es ligeramente más grande que la recomendación de WCAG de 44 pt por 44 pt.
- Haga que los botones más utilizados sean aún más grandes para mejorar la eficiencia y para ayudar a evitar que se pasen por alto.
- Separe los botones por al menos 8 pt para ayudar a evitar que las personas presionen accidentalmente el equivocado.
En nuestro ejemplo, el tamaño objetivo de los 2 botones ya es suficiente, pero hay mucho espacio para hacerlos más anchos. Dado que hay espacio, puede ensanchar los botones para aumentar su tamaño objetivo.
5. Asegúrese de que el contenido importante sea visible
Las personas no usan lo que no pueden ver. Ocultar cosas detrás de menús interactivos es una manera conveniente de mantener una interfaz limpia y minimalista, pero es arriesgado, ya que algunas personas podrían perderse esas cosas. Si hay espacio, intente asegurarse de que el contenido y las acciones importantes sean visibles cuando se necesiten.
En nuestro ejemplo, las acciones se ocultan dentro de un menú interactivo para ayudar a desordenar el diseño. Si bien se ve limpio y minimalista, existe el riesgo de que algunos se pierdan las acciones. Dado que hay espacio para mostrar las 2 acciones, “compartir” y “guardar como favorito”, hágalas visibles para ayudar a asegurar que no se pasen por alto.
6. Disminuir el espacio entre letras para texto grande
Un pequeño truco para hacer que los títulos grandes se vean mejor es disminuir su espacio entre letras (espacio entre letras). Cuánto disminuir el espacio entre letras depende de la tipografía y el tamaño, pero en general, querrá disminuir el espacio entre letras más a medida que el texto se vuelve más grande.
Esto se debe a que muchas tipografías fueron diseñadas para ser leídas en tamaños pequeños en texto de cuerpo largo. Se conocen como tipografías de “texto” y tienen un espacio entre letras amplio para hacerlas más legibles en tamaños pequeños. Probablemente no necesitará disminuir el espacio entre letras para tipografías de “display”, ya que fueron diseñadas para ser utilizadas en tamaños grandes y generalmente tienen un espacio entre letras más cercano.
En nuestro ejemplo, el espacio entre letras del nombre de la persona se disminuye para mejorar la estética.
7. No confíe solo en el color como indicador
No confíe solo en el color para transmitir significado o distinguir elementos visuales, ya que aquellos con visión baja o daltonismo pueden no poder ver el indicador. Use señales visuales adicionales para diferenciar los elementos de la interfaz.
En nuestro ejemplo, hay 2 áreas que podrían ser confusas. Vamos a hacerlas más claras.
Si observa las 3 pestañas encima de la lista de artículos, puede que no sea obvio que “artículos” es la pestaña seleccionada. Esto se debe a que se está utilizando una diferencia muy sutil en el color para indicar que una pestaña está seleccionada. Agregar un subrayado a la pestaña seleccionada ayuda a hacerla más clara.
De manera similar, en la navegación inferior, se está utilizando un cambio de color sutil para diferenciar el icono seleccionado de los demás. Para hacerlo más obvio, el icono seleccionado se rellena.
8. Intente evitar usar múltiples alineaciones
Cuantos más tipos diferentes de alineación use (izquierda, derecha o centro), más compleja y desordenada puede verse una interfaz. Nuestros ojos se ven obligados a trabajar más duro a medida que se mueven para intentar seguir cada alineación. Esto se destaca cuando se utilizan múltiples alineaciones diferentes dentro de un componente o sección pequeño de una interfaz.
Mantenerse con una sola alineación (o la menor cantidad posible) ayuda a simplificar una interfaz, haciéndola ver más ordenada y organizada.
En nuestro ejemplo, las pestañas están alineadas al centro, mientras que la mayoría de los otros elementos en la página están alineados a la izquierda. La mezcla de alineaciones añade complejidad innecesaria, resultando en una carga cognitiva ligeramente aumentada (la cantidad de poder cerebral requerida para usar una interfaz). Alinear las pestañas a la izquierda ayuda a ordenar las cosas.
9. Asegúrese de que el texto tenga una relación de contraste de 4.5:1
Para ayudar a asegurar que las personas con discapacidades visuales puedan leer claramente el texto, este debe cumplir con los siguientes requisitos de contraste de WCAG 2.1 nivel AA:
- El texto pequeño (18px y menos) necesita un contraste mínimo de 4.5:1.
- El texto grande (más de 18px con peso en negrita o más de 24px con peso regular) necesita un contraste mínimo de 3:1.
En nuestro ejemplo, el texto pequeño en las pestañas no seleccionadas tiene un contraste insuficiente. Usar un gris más oscuro nos da un contraste suficiente.
10. Considere eliminar contenedores para simplificar una interfaz
Dividir la información en grupos más pequeños de elementos relacionados ayuda a estructurar y organizar una interfaz. Esto hace que sea más rápido y fácil para las personas entender y recordar.
Puede agrupar elementos relacionados utilizando los siguientes métodos:
- Colocar elementos relacionados en el mismo contenedor
- Espaciar elementos relacionados cerca unos de otros
- Hacer que los elementos relacionados se vean similares
- Alinear elementos relacionados en una línea continua
Usar contenedores es la señal visual más fuerte para agrupar elementos de interfaz, pero puede agregar desorden innecesario. Busque oportunidades para usar otros métodos de agrupación, a menudo son más sutiles y pueden ayudar a simplificar los diseños.En nuestro ejemplo, los contenedores alrededor de cada artículo son innecesarios, ya que ya se están utilizando múltiples otros métodos de agrupación. Eliminar los contenedores también crea más espacio para el contenido.
11. Usa solo pesos de fuente regular y negrita
Solo porque hay muchos pesos de fuente disponibles en una tipografía, no significa que necesites usarlos todos en tus diseños de interfaz de usuario. Usar muchos pesos de fuente diferentes puede añadir ruido y desorden a tu interfaz. También hace que sea más difícil usar cada peso de fuente de manera consistente.
Mantén tu sistema de diseño simple y conciso usando solo pesos de fuente regular y negrita. Algunas tipografías tienen una opción de fuente seminegrita que puedes usar en lugar de negrita si la negrita es demasiado pesada.
Consejos rápidos de uso:
- Usa el peso de fuente negrita para los títulos para enfatizarlos.
- Usa el peso de fuente regular para el resto del texto más pequeño.
- Si decides usar pesos de fuente muy finos o gruesos, resérvalos para los títulos y el texto más grande, ya que pueden ser difíciles de leer en tamaños más pequeños.
En nuestro ejemplo, se utilizan 3 pesos de fuente diferentes para los detalles del artículo. Aunque el contraste de los pesos de fuente “extra light” y “thin” está por encima del ratio de contraste requerido de 4.5:1, los caracteres aún podrían ser difíciles de leer para algunas personas. Aumentar el peso de la fuente a “regular” ayuda a mejorar la legibilidad y simplifica el diseño. Usar “semi-bold” para el título del artículo ayuda a que destaque.
Usar solo 2 pesos de fuente resulta en el siguiente diseño. Estamos haciendo buenos progresos aplicando los consejos de diseño de interfaz de usuario, pero aún nos quedan algunos problemas por resolver.
12. Sé consistente
La consistencia en el diseño de interfaz de usuario significa que los elementos similares se ven y funcionan de manera similar. Esto debe ser cierto tanto dentro de tu producto como cuando se compara con otros productos bien establecidos. Esta funcionalidad predecible mejora la usabilidad y reduce los errores, ya que las personas no necesitan seguir aprendiendo cómo funcionan las cosas.
En nuestro ejemplo, las fotos de cada artículo tienen esquinas afiladas, lo que no coincide con las esquinas redondeadas suaves de los botones e iconos. Redondear las esquinas de las fotos ayuda a crear un lenguaje visual más consistente. Puede que no pienses que detalles tan pequeños como este marquen mucha diferencia, pero todos suman para hacer que un diseño se sienta “correcto”.
13. No confundas minimalismo con simplicidad
Minimal no significa simple. Los diseñadores tienden a favorecer las interfaces minimalistas, ya que pueden verse hermosas y limpias. Una interfaz minimalista tiene menos elementos y estilos, pero no necesariamente es simple de entender y usar.
Las interfaces minimalistas pueden ser a menudo vagas o confusas, ya que carecen de detalles cruciales necesarios para una buena usabilidad. La simplificación no se trata solo de reducción. Eliminar o ocultar demasiado puede dañar la usabilidad. Necesitas asegurarte de que no estás eliminando información o detalles críticos.
En nuestro ejemplo, los iconos de la navegación inferior se ven limpios y minimalistas, pero ¿queda claro lo que significan? Puede que no sea así para todos. Añadir etiquetas de texto a los iconos ayuda a asegurar 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).
14. Equilibra los pares de iconos y texto
Al emparejar iconos con texto, intenta asegurarte de que tengan una prominencia visual similar para un aspecto más equilibrado y cohesionado.
En nuestro ejemplo, los pares de iconos y texto en la navegación inferior están ligeramente desequilibrados. Los iconos y el texto son del mismo color, pero los iconos son más gruesos y grandes, lo que les da más prominencia. Oscurecer el texto aumenta su prominencia, por lo que está equilibrado con los iconos. Aumentar el contraste del texto a al menos 4.5:1 también asegura que sea accesible para aquellos con visión baja.
¡Lo logramos!
Con solo unos pocos consejos sencillos de diseño de interfaz de usuario, pudimos identificar y resolver una serie de problemas en nuestra interfaz de ejemplo. Por supuesto, podrías llevar las cosas más allá adaptando el estilo visual para adaptarse a una personalidad de marca en particular si es necesario. Para este ejemplo, sin embargo, nos enfocamos en hacer bien los fundamentos.
Espero que estés empezando a ver que el diseño de interfaz de usuario no necesita sentirse abrumador. Aunque a veces puede parecer un arte misterioso reservado para los naturalmente talentosos, gran parte del gran diseño de interfaz se basa en directrices claras y lógicas como las que has aprendido aquí.
Confiar en directrices objetivas, en lugar de opiniones subjetivas, hace que sea mucho más fácil (y rápido) diseñar interfaces que sean intuitivas, accesibles y visualmente pulidas. Cuanto más practiques usando estos consejos de diseño de interfaz de usuario, más naturalmente se convertirán en parte de tu proceso de diseño. Úsalos como base y no tengas miedo de explorar, experimentar y llevar tu creatividad más allá desde allí.
¿Quieres más consejos de diseño de interfaz de usuario?
Estos son solo algunos de los consejos de diseño de interfaz de usuario basados en lógica de mi libro de diseño de interfaz de usuario. Encontrarás cientos más con ejemplos detallados en el libro. También puedes echar un vistazo detrás de escena a la creación del libro si estás interesado.
via UX Planet