Piensa en tu sitio web o aplicación favorita. ¿Qué la hace tu favorita? Ahora, piensa en un sitio web o una app que no te guste. ¿Qué no te gusta? La forma en que los usuarios interactúan con tu diseño y su experiencia en tu sitio web y app pueden variar.
Esa experiencia puede cambiar según la hora del día, el tipo de dispositivo que usó, si durmieron lo suficiente la noche anterior, si no se sienten bien, si usan tecnología de accesibilidad y mucho más. Con cerca de ocho mil millones de personas en todo el mundo, las posibilidades de cómo las personas usan y experimentan tus diseños son ilimitadas.
Diseño inclusivo
¿Cómo podemos abordar todas las necesidades potenciales de los usuarios a la vez? Ingresa el diseño inclusivo. El diseño inclusivo utiliza un enfoque centrado en las personas que combina la inclusión, la usabilidad y la accesibilidad en uno.
A diferencia del diseño universal, que se enfoca en un solo diseño que puede usar la mayor cantidad posible de personas, los principios del diseño inclusivo se centran en diseñar para una persona o un caso de uso específico y, luego, extender ese diseño a otras personas.
Existen siete principios de diseño inclusivo centrados en la accesibilidad:
- Proporciona una experiencia comparable: Asegúrate de que tu interfaz proporcione una experiencia igual para todos, de modo que las personas puedan realizar tareas de una manera que se adapte a sus necesidades sin perjudicar la calidad del contenido.
- Ten en cuenta la situación: Asegúrate de que tu interfaz ofrezca una experiencia valiosa a las personas, independientemente de sus circunstancias.
- Sé coherente: Usa convenciones conocidas y aplícalas de forma lógica.
- Otorgar control: Asegúrate de que las personas puedan acceder al contenido y también interactuar con él de la forma que prefieran.
- Ofrece opciones: Considera proporcionar diferentes formas para que las personas completen tareas, especialmente aquellas que son complejas o no estándar.
- Prioriza el contenido: Ayuda a los usuarios a enfocarse en las tareas, las funciones y la información principales mediante la organización de estos elementos en el orden preferido dentro del contenido y el diseño.
- Agregar valor: Ten en cuenta el propósito y la importancia de las funciones, y cómo mejoran la experiencia de los diferentes usuarios.
Personas
Cuando se desarrollan un nuevo diseño o función, muchos equipos dependen de las personas de los usuarios para guiarlos a lo largo del proceso. Los arquetipos son personajes ficticios que usan tus productos digitales, a menudo basados en investigaciones cuantitativas y cualitativas sobre usuarios.
Los arquetipos también ofrecen una forma rápida y económica de probar y priorizar esas funciones durante el proceso de diseño y desarrollo. Ayudan a enfocar las decisiones en torno a los componentes del sitio, ya que agregan una capa de consideración real a la conversación para ayudar a alinear la estrategia y crear objetivos enfocados en grupos de usuarios específicos.
Incorpora discapacidades
“Las personas son diferentes. Solo puedo hablar de mi experiencia. Cuando conoces a una persona sorda, conoces a una persona sorda, no a todos nosotros".
Meryl Evans de la charla de ID24 Deaf Tech: Travel Through Time from Past to Future
Los arquetipos se pueden usar como una herramienta de diseño inclusiva cuando incorporas a personas con discapacidades en tus arquetipos. Hay muchas formas de hacerlo. Puedes crear arquetipos específicos de discapacidad, agregar discapacidades a los arquetipos de usuario existentes o incluso crear un espectro de arquetipos para reflejar la realidad dinámica de las discapacidades situacionales, temporales y permanentes.
No importa cómo incorpores a las personas con discapacidades en tus arquetipos, estos no deben basarse en estereotipos ni en personas reales. Además, los arquetipos nunca sustituyen a las pruebas de usuario.
- Nombre: Jane Bennet
- Edad: 57 años
- Ubicación: Essex, Reino Unido
- Ocupación: Ingeniero de UX
- Discapacidad: Temblor en la mano provocado por la enfermedad de Parkinson de aparición joven (PYP)
- Objetivos: Usar la entrada de voz a texto para que se puedan agregar sugerencias de código con mayor facilidad. Encuentra equipos de ciclismo en línea con una cantidad mínima de teclas.
- Frustraciones: sitios web que no admiten solo el teclado, apps de diseño con áreas pequeñas para la interacción táctil
Como ingeniera de UX, Jane diseña y crea páginas que son fundamentales para que el sitio de su empresa sea relevante. Ayuda a muchos miembros del equipo durante el día. Es la reina de apagar incendios técnicos y la persona a la que todos acuden en el departamento cuando algo falla de forma inesperada.
La pérdida de sus habilidades motoras finas debido a los temblores le dificulta cada vez más usar un mouse. Cada vez depende más del teclado para navegar por la Web. Jane siempre se ha dedicado a su estado físico. Le encantan las carreras de ruta y el BMX. Esto la convirtió en un golpe aún más intenso cuando, el año pasado, le diagnosticaron la enfermedad de Parkinson de Young Onset.
Simuladores de discapacidad
Ten mucho cuidado cuando uses simuladores de discapacidad para emular o complementar tus arquetipos.
Los simuladores de discapacidad son un arma de doble filo, ya que pueden generar simpatía o empatía, lo que puede depender de la persona, el contexto en el que se usa el simulador y muchos otros factores incontrolables. Muchos defensores de la accesibilidad están en contra del uso de herramientas de simulación de discapacidades y recomiendan buscar películas, demostraciones, instructivos y otro contenido creado por personas con discapacidades, además de aprender sobre sus experiencias de primera mano.
"Creo que debemos ser completamente honestos respecto de que cualquier actividad de simulación no impacta en algunos de los conocimientos más importantes que queremos que conozcan las personas videntes. La ceguera no es la característica que nos define, que los malentendidos y las bajas expectativas sobre la ceguera son nuestro mayor obstáculo.
Esos malentendidos crean barreras artificiales que nos impiden participar por completo, y esas limitaciones falsas se convierten en algo que nos frena".
Mark Riccobono, presidente de la National Federation of the Blind.
Heurísticas de accesibilidad
Considera agregar heurísticas a tu flujo de trabajo a medida que creas tus arquetipos y diseños. Las heurísticas son reglas para el diseño de interacción que Jakob Nielsen y Rolf Molich introdujeron en 1990. Estos diez principios se desarrollaron en función de años de experiencia en el campo de la ingeniería de usabilidad y se han utilizado en programas de diseño y de interacción entre humanos y computadoras desde entonces.
En 2019, el equipo de diseño de Deque creó y compartió un nuevo conjunto de heurísticas centradas en la accesibilidad digital. Según su investigación, se puede evitar hasta el 67% de todos los errores de accesibilidad de un sitio web o una app cuando la accesibilidad forma parte del proceso de diseño. Ese es un gran impacto que puede lograrse incluso antes de que se escriba una línea de código.
Al igual que con el conjunto original de heurísticas, hay diez heurísticas de accesibilidad que debes tener en cuenta cuando planifiques tu diseño.
- Métodos y modalidades de interacción: Los usuarios pueden interactuar de manera eficiente con el sistema con el método de entrada que elijan (como un mouse, un teclado, la función táctil, etcétera).
- Navegación y referencia: Los usuarios pueden navegar, encontrar contenido y determinar dónde se encuentran, en todo momento, dentro del sistema.
- Estructura y semántica: Los usuarios pueden comprender la estructura del contenido en cada página y entender cómo operar dentro del sistema.
- Estados y prevención de errores: Los controles interactivos tienen instrucciones persistentes y significativas para ayudar a evitar errores y proporcionar a los usuarios estados de error claros que indican cuáles son los problemas y cómo solucionarlos cada vez que se muestran errores.
- Contraste y legibilidad: Los usuarios pueden distinguir y leer fácilmente el texto y otra información significativa.
- Lenguaje y legibilidad: Los usuarios pueden leer y comprender el contenido con facilidad.
- Predecibilidad y coherencia: Los usuarios pueden predecir el propósito de cada elemento. Queda claro cómo se relaciona cada elemento con el sistema en su totalidad.
- Tiempo y preservación: Los usuarios tienen tiempo suficiente para completar sus tareas y no pierden información si se agota el tiempo (es decir, una sesión).
- Movimiento y parpadeo: Los usuarios pueden detener los elementos de la página que se mueven, parpadean o tienen animación. Los usuarios no deben distraerse ni verse afectados por estos elementos.
- Alternativas visuales y auditivas: Los usuarios pueden acceder a alternativas basadas en texto para cualquier contenido visual o auditivo que transmita información.
Una vez que tengas una comprensión básica de estas heurísticas de accesibilidad, puedes aplicarlas a un arquetipo o diseño con la hoja de cálculo de heurísticas de accesibilidad y siguiendo las instrucciones proporcionadas. Este ejercicio es más esclarecedor cuando recopilas varias perspectivas.
Un ejemplo de revisión heurística de accesibilidad para el punto de control de navegación y orientación podría verse de la siguiente manera:
| Puntos de control para la navegación y la orientación | Sobresaliente (+2 puntos) | Aprobaciones (+1 punto) | Errores (-1 pt) | N/A (0 puntos) |
|---|---|---|---|---|
| ¿Se establece un indicador claro y visible en todos los elementos activos a medida que reciben el enfoque? | ||||
| ¿La página tiene un texto de título significativo, con información específica de la página en primer lugar? | ||||
| ¿El elemento del título de la página y el H1 son iguales o similares? | ||||
| ¿Hay encabezados significativos para cada sección principal? | ||||
| ¿El propósito de los vínculos se define solo a partir del texto del vínculo o de su contexto inmediato? | ||||
| ¿Se proporciona un vínculo para omitir en la parte superior de la página y se muestra cuando se enfoca? | ||||
| ¿La organización de los elementos de navegación facilita la orientación? |
Después de que todos los miembros del equipo revisen la página o el componente y realicen su revisión heurística de accesibilidad, se suman los totales de cada punto de control. En este punto, puedes decidir cómo solucionar los problemas encontrados o corregir las omisiones que son fundamentales para admitir la accesibilidad digital.
Anotaciones de accesibilidad
Antes de entregar tu diseño al equipo de desarrollo, debes considerar agregar anotaciones de accesibilidad.
En general, las anotaciones se usan para explicar las elecciones creativas y describir diferentes aspectos del diseño. Las anotaciones de accesibilidad se enfocan en áreas en las que los desarrolladores pueden tomar decisiones programáticas más accesibles con la guía del equipo de diseño o un especialista enfocado en la accesibilidad.
Las anotaciones de accesibilidad se pueden aplicar durante cualquier etapa del proceso de diseño, desde los esquemas de página hasta las maquetas de alta fidelidad. Pueden incluir flujos de usuarios, estados condicionales y funcionalidad. A menudo, usan símbolos y etiquetas para optimizar el proceso y mantener el diseño como el enfoque principal.
Los siguientes ejemplos de ilustraciones de diseño son del kit de anotaciones de accesibilidad de Indeed.com para Figma.
Según tu programa de diseño, deberías tener varios kit de iniciación para la anotación de accesibilidad para elegir. O bien, si lo prefieres, puedes crear tu propio conjunto. En cualquier caso, debes decidir qué información se debe comunicar al equipo de transferencia y qué formato funciona mejor.
Estas son algunas áreas que debes tener en cuenta para las anotaciones de accesibilidad:
- Color: Incluye las proporciones de contraste de todas las diferentes combinaciones de colores de la paleta.
- Botones y vínculos: Identifica los estados predeterminado, de desplazamiento del mouse, activo, enfocado y inhabilitado.
- Vínculos para omitir: Destacan los aspectos del diseño ocultos y visibles, y adónde dirigen en la página.
- Imágenes y íconos: Agrega recomendaciones de texto alternativo para imágenes y íconos esenciales.
- Audio y video: Destaca áreas y vínculos para subtítulos, transcripciones y audiodescripciones.
- Encabezados: Agrega niveles programáticos e incluye todo lo que parezca un encabezado.
- Puntos de referencia: Destaca las diferentes secciones del diseño con HTML o ARIA.
- Componentes interactivos: Identifica los elementos en los que se puede hacer clic, los efectos de desplazamiento del mouse y el área de enfoque.
- Teclado: Identifica dónde debe comenzar el enfoque (parada alfa) y el siguiente orden de tabulación.
- Formularios: Agrega etiquetas de campo, texto de ayuda, mensajes de error y mensajes de éxito.
- Nombres accesibles: Identifican cómo la tecnología de accesibilidad debe reconocer el elemento.