Notas sobre mis aprendizajes: diseñar inclusivamente (3/4).

← Artículo anterior

2: UI Design.

Ahora, centrémonos en las decisiones visuales, patrones e interacciones.

1. Revisar el contraste figura/fondo de los elementos.
Es crucial testear los contrastes de color, fundamental para no complejizar la lectura a personas con problemas de visión. A menudo, algo tan importante como el color elegido para identificar el focus carece del contraste necesario. Esto se complejiza más si hablamos de fotos o texturas, o incluso por imagenes dinámicas elegidas por usuario, que están fuera del control del diseñador. En estos casos, agregar transparencias puede ser una solución común para tratar de garantizar el contraste adecuado.

2. No usar el color como único indicador, incluso si el contraste es correcto.
Las personas con daltonismo pueden no percibir cambios de color importantes, como puede ser un indicador de error. Es por eso que una buena práctica es utilizar otro recurso además del color que refuerce la información y capte la atención. Por ejemplo, en caso de errores, se puede agregar un ícono; para marcar un elemento como seleccionado, se puede agregar una línea; y para destacar un enlace, se puede utilizar un subrayado.

Algunos plugins que uso en Figma para testear contrastes y distintos tipos de daltonismo.

3. Priorizar el uso de SVG sobre otros formatos como el PNG o JPG.
El SVG no solo mejora el rendimiento del sitio, sino que también es fundamental para el responsive y para aquellos que utilizan magnifiers de pantalla debido a diversidades visuales.

4. Tener especial cuidado con el estilo tipográfico y su legibilidad.

• Las tipografías extravagantes suelen dificultar la lectura. Se debe garantizar una buena legibilidad y contraste tipográfico. Por ejemplo, las tipografías muy delgadas, con muchas curvas o que puedan generar confusión entre las letras pueden ser problemáticas.

Ejemplo entre una tipografia poco legible y otra legible.

• El tamaño recomendable un texto de lectura de tamaño 14/16px, aunque obviamente se debe también evaluar según plataforma.
• Mantener un interlineado en párrafos con una relación de 1.5, ya que esto favorece la legibilidad del texto.

Ejemplos de interlineados.

• En cuanto al letter spacing, personalmente recomiendo no modificarlo, ya que considero que fuentes se diseñan con un espaciado específico por una razón. Sin embargo, si se decide ajustarlo, es crucial encontrar un equilibrio sin comprometer la legibilidad.
• En relación con las diferentes variantes de una fuente, como bold o light, su impacto en la legibilidad está directamente relacionado con el tamaño de la fuente. Utilizar bold no siempre garantiza una mejor visibilidad si la tipografía es pequeña o el texto es extenso. Lo mismo ocurre con las variantes thin o light. Por lo tanto, es importante comprender qué conviene según el tamaño de la fuente, la longitud del texto, la ubicación, entre otros factores.

Diferencias entre variables tipográficas.

• Para garantizar una lectura adecuada, el largo de cada línea no debe superar los 70/80 caracteres, pero tampoco ser inferior a 25. Los mínimos y máximos deben estar incluso en el código para ajustar el ancho del texto automáticamente al adaptarse a diferentes dispositivos y pantallas.

Ejemplo de distintos anchos de párrafos.

El plugin de Figma Text Counts sirve para contar carácteres y palabras, lo que ayuda a no irse a mas de 250, pero también por ejemplo ayuda a calcular el ancho de un párrafo.

Plugin Text Counts de Figma.

• Es importante evitar hacer divisiones silábicas de palabras entre líneas de texto o usar elipsis (…) en los párrafos, ya que no solo dificultan la lectura, sino que encima puede causar problemas para los lectores de voz.

5. Usar rems, en vez de píxeles.
Los rems favorecen a la escalabilidad, accesibilidad y facilidad de mantenimiento, ya que son relativos al tamaño de fuente del html; en cambio los pixels son unidades fijas. Los usuarios pueden cambiar el tamaño de fuente en su navegador al cambiar la unidad de medida (rems) para adaptarlo a sus necesidades visuales. En conclusión, diseñar pensando en rems garantiza la proporcionalidad frente a estos ajustes, permitiendo además un diseño más flexible y escalable. Por defecto, 1rem=16px, pero esto puede cambiarse según necesidad.

6. Usar iconos para reforzar contenido:

• Deben ser legibles y comprensibles para todos los usuarios, teniendo en cuenta por ejemplo su edad y nivel de experiencia tecnológica. No es necesario alterar patrones y convenciones universales con el único objetivo de ser originales (principio de la Ley de Jakob), ya que esto puede dificultar la interacción y romper acuerdos de lectura establecidos.
• Al usarlos en botones, es fundamental acompañarlos con un label, un tooltip al hacer hover o, al menos, proporcionar un texto alternativo. Esto garantiza que la funcionalidad sea clara y comprensible para todos los usuarios, incluidos aquellos que dependen de lectores de pantalla.
• Lograr un contraste suficiente no solo en cuanto al color, sino tambien en cuanto al stroke y su tamaño. El grosor de línea recomendable es entre 1.5 y 2px, mientras que el tamaño debería ser 20 y 24px, y solo 16px como excepción.
• Tener cuidado con el espacio negativo y el stroke porque puede afectar al reconocimiento.

Ejemplos con iconos como eliminar o llamar.

7. Diseñar la interacción de los elementos.

• Hay que ser consciente de los distintos patrones de interacción según el dispositivo. Estos patrones incluyen acciones como tap, doble tap, swipe (deslizar), hacer clic, doble clic, clic izquierdo, clic derecho, etc. Es importante considerar los tipos de interacción sobre un componente y diseñarlos de manera que faciliten la experiencia.
• Se recomienda un área de interacción no menor a 44px x 44px, aunque el elemento en sí no necesariamente tenga que tener esas dimensiones exactas. Aunque existen excepciones, como los enlaces dentro de un párrafo, en la mayoría de los casos, tener un área de interacción adecuada ayuda a prevenir errores o dificultades de precisión, especialmente para personas con diversidades motrices.
• El área de interacción incluso deber ser parte del componente creado en Figma, para evitar confusiones al desarrollarlos.

Diseñar el área de interacción es tan importante como el componente en si.

• Mantener una distancia mínima de 8px, aunque preferiblemente de 16px entre elementos interactivos, para prevenir interacciones no deseadas.

• Cada estado del componente (default, hover, focus, tab focus, press, active, disable, visited) debe cambiar visualmente, al igual que el cursor y la etiqueta en el código.
  - En focus, se debe mantener un trazo entre 1.5 y 2px y un color con suficiente contraste.
  - En disabled, se deben emplear recursos visuales (como el color o el estado del cursor) junto con ajustes en el código, para indicar al usuario que el elemento no está disponible para interactuar, como así también proporcionar una comprensión clara del motivo por el cual el elemento está deshabilitado.

Distintos estados de CTAs.

8. Intenta evitar crear elementos personalizados cuando hay elementos nativos que cumplen la misma función.
Los elementos nativos ya cuentan con accesibilidad incorporada, mientras que crear algo personalizado implica construirlo desde cero y realizar pruebas exhaustivas para asegurarse de no omitir ningún detalle.

9. Respetar los patrones para cada dispositivo y plataforma.
Cambiar la ubicación de elementos que suelen encontrarse en una zona específica puede complicar la experiencia de usuario, especialmente para aquellos que dependen de lectores de voz o tienen diversidad cognitiva. Por ejemplo, mover el acceso a “Mi cuenta” de la esquina superior derecha a otro lugar podría generar confusión y dificultades de navegación.

Ejemplo de ubicación para loguearse a una cuenta.

10. Tener cuidado con el Disclosure pattern.
En UI se puede decidir dejar oculto una parte del contenido, como los expanded buttons o los “ver mas” de un texto en una card, con el objetivo de bajar la carga cognitiva. Y si bien eso puede ser beneficioso para algunos usuarios, para otros podria ser un problema, ya que implica una interaccion mas, por lo cual hay que ser estrategicos en que, donde y cuando. Ahora, si decidimos hacerlo, es clave el affordance tanto visual como a nivel codigo para que se entienda que hay algo oculto y como se puede ver si se quiere.

11. Tener cuidado con la superposición de contenido, especialmente en los modales:

• Uno de los errores más comunes ocurre con el focus: en los modales, es necesario mantener el enfoque dentro de los elementos del modal para evitar que el enfoque se desplace al contenido de fondo (focus trapping). Este enfoque en bucle evita complicar significativamente la experiencia para los usuarios que dependen del teclado para la navegación.

Ejemplo de orden de focus y Voiceover en un modal.

• Diseñar las diferentes opciones para cerrar el modal, fundamental para personas con diversidades motoras, como asi también evaluar si todas deben mantenerse a nivel lectores de voz o incluso focus, ya que demasiadas opciones pueden generar confusión en lugar de ser útiles.

Ejemplo de modal con las distintas posibilidades de cerrarlo.

• Al cerrar un modal, es crucial que el focus regrese al mismo lugar desde el cual se abrió el modal, en lugar de avanzar al siguiente paso. Esto facilita el entendimiento de personas que usen un lector de voz, como asi también facilita la interacción con el teclado.
• Construir los modales con proporciones de pantalla, no con medidas fijas. Esto es fundamental por ejemplo en su responsive, como asi también al usar magnifiers de pantalla.

Ejemplo de como podría verse un modal con magnifier, perdiendo el contexto y contenido.

12. Considerar la ergonomía e interacción al diseñar los layouts:

• Evitar ángulos difíciles de interactuar, que pueden variar según múltiples factores( forma de sostener el teléfono, edad, situación de uso, etc.). Tratar de contemplar todas las variaciones, busca garantizar una experiencia cómoda y accesible.
• Agrupar elementos según su uso e importancia, tanto a nivel visual como en el espacio: siguiendo la Ley de Proximidad. Esto no solo ayuda a la organización visual, sino también facilita la interacción en el uso de un lector de voz o en personas con diversidad cognitiva.
• Diseñar las proximidades entre los distintos elementos interactivos siguiendo la Ley de Fitts: “El tiempo necesario para alcanzar el objetivo como una función de la distancia y tamaño que hay que recorrer hasta él”. Por ejemplo, evitar tener pasos relacionados en extremos opuestos, lo que incrementa la dificultad, especialmente en tareas repetitivas.

Gráfico explicativo de la Ley de Fitts.

• Buscar reducir el número de tareas repetitivas. Por ejemplo, en lugar de requerir que los usuarios eliminen elementos uno por uno, es recomendable proporcionar opciones para seleccionar múltiples elementos y realizar una acción conjunta.

Ejemplo sobre eliminacion multiple.

13. Dar la cantidad adecuada de opciones.
La Ley de Hick establece que “el tiempo que se tarda en adoptar una decisión, aumenta a medida que se incrementa el número de opciones”, mientras la Ley de Miller, que dice que “un usuario de promedio solo puede retener hasta 7 elementos en su memoria inmediata”. Estos principios son cruciales para todos los usuarios, pero resulta especialmente importante para aquellos con diversidad cognitiva, con dificultades de memoria o para usuarios que utilizan lectores de voz, donde la sobrecarga de información complejiza la toma de decisiones.

14. Por último, incorporar estos aspectos como parte integral del proceso de diseño desde los wireframes.

• Realizar pruebas rápidas de escalabilidad para mobile y desktop.
• Probar rápidamente los tamaños mínimos y máximos de los elementos.
• Considerar cómo funcionaría la interfaz con tipografía más grande o con magnifiers, aumentando el tamaño en un 200% sin perder parte del contenido ni afectar la legibilidad.

Pensar en todo esto desde el inicio del proceso de diseño garantiza una experiencia de usuario más inclusiva y accesible, y ayuda a identificar y abordar posibles problemas de usabilidad desde el principio.

Artículo siguiente →