Piensa en tu sitio web o app favoritos. ¿Qué los hace tus favoritos? 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 tu app pueden variar.
Esa experiencia puede cambiar según la hora del día, el tipo de dispositivo que se use, si se durmió lo suficiente la noche anterior, si no se siente bien, si se usa tecnología de asistencia y mucho más. Con casi 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 posibles necesidades de los usuarios a la vez? Aquí es donde entra en juego 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 un solo concepto.
A diferencia del diseño universal, que se enfoca en un solo diseño que la mayor cantidad posible de personas puedan usar, los principios del diseño inclusivo se centran en diseñar para una persona o un caso de uso específicos 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 equitativa para todos, de modo que las personas puedan realizar tareas de una manera que se adapte a sus necesidades sin menoscabar la calidad del contenido.
- Considera la situación: Asegúrate de que tu interfaz proporcione una experiencia valiosa a las personas, independientemente de sus circunstancias.
- Sé coherente: Usa convenciones conocidas y aplícalas de manera lógica.
- Brinda control: Asegúrate de que las personas puedan acceder al contenido y usarlo de la manera que prefieran.
- Ofrece opciones: Considera ofrecer diferentes formas para que las personas completen tareas, en especial las 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 organizando estos elementos en el orden preferido dentro del contenido y el diseño.
- Agregar valor: Considera el propósito y la importancia de las funciones, y cómo mejoran la experiencia de los diferentes usuarios.
Personas
Cuando desarrollan un nuevo diseño o función, muchos equipos se basan en los arquetipos de usuario para guiarse durante el proceso. Los arquetipos son personajes ficticios que usan tus productos digitales y, a menudo, se basan en la investigación de usuarios cuantitativa y cualitativa.
Las 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 relacionadas con los componentes del sitio, ya que agregan una capa de consideración del mundo real a la conversación para alinear la estrategia y crear objetivos centrados en grupos de usuarios específicos.
Incorporación de discapacidades
"Todas las personas son diferentes. Solo puedo hablar desde mi experiencia. Cuando conoces a una persona sorda, conoces a una persona sorda, no a todas".
Meryl Evans de la charla de ID24 Deaf Tech: Travel Through Time from Past to Future.
Los arquetipos pueden usarse como una herramienta de diseño inclusivo cuando incorporas a personas con discapacidades en ellos. Hay muchas formas diferentes de hacerlo. Puedes crear arquetipos específicos para personas con discapacidades, agregar discapacidades a los arquetipos de usuarios existentes o incluso crear un espectro de arquetipos para reflejar la realidad dinámica de las discapacidades situacionales, temporales y permanentes.
Independientemente de cómo incorpores a las personas con discapacidades en tus arquetipos, no deben basarse en personas reales ni en estereotipos. Además, los arquetipos nunca reemplazan las pruebas de usuarios.
- Nombre: Jane Bennet
- Edad: 57 años
- Ubicación: Essex, Reino Unido
- Ocupación: Ingeniero de UX
- Discapacidad: Temblor en las manos debido a la enfermedad de Parkinson de inicio temprano (EPIT)
- Objetivos: Usar la entrada de voz a texto para facilitar la adición de sugerencias de código y encontrar equipos de ciclismo en línea con la menor cantidad de pulsaciones de teclas posible
- 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 vitales para mantener la relevancia del sitio de su empresa. Brinda asistencia a muchos miembros del equipo durante el día. Es la reina de apagar incendios técnicos y la persona a la que todos recurren en el departamento cuando algo sale mal de forma inesperada.
Perder la motricidad fina debido a los temblores le dificulta cada vez más usar el mouse. Cada vez más, se apoya en el teclado para navegar por la Web. Jane siempre se dedicó a su estado físico. Le encantan las carreras de ruta y el BMX. Por eso, fue un golpe aún mayor cuando le diagnosticaron Parkinson de inicio temprano el año pasado.
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. Esto puede depender de la persona, el contexto en el que se usa el simulador y muchos otros factores incontrolables. Muchos defensores de la accesibilidad se oponen al uso de herramientas de simulación de discapacidades y recomiendan buscar películas, demostraciones, instructivos y otro contenido creado por personas con discapacidades, y aprender sobre sus experiencias de primera mano.
"Creo que debemos ser completamente honestos y reconocer que cualquier actividad de simulación no afecta algunos de los conocimientos más importantes que queremos que las personas videntes tengan en su corazón y en su mente. La ceguera no es la característica que nos define, sino que los malentendidos y las bajas expectativas sobre la ceguera son nuestro mayor obstáculo.
Esos malentendidos crean barreras artificiales que nos impiden participar plenamente, y esas limitaciones falsas se convierten en algo que nos detiene".
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, presentadas en 1990 por Jakob Nielsen y Rolf Molich. 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 personas y computadoras desde entonces.
En 2019, el equipo de diseño de Deque creó y compartió un nuevo conjunto de heurísticas enfocadas 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. Este es un gran impacto que se puede lograr incluso antes de escribir una sola línea de código.
Al igual que 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 usando el método de entrada que elijan (como mouse, teclado, tacto, etcétera).
- Navegación y orientación: 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.
- Prevención de errores y estados: Los controles interactivos tienen instrucciones persistentes y significativas para ayudar a evitar errores, y proporcionan a los usuarios estados de error claros que indican cuáles son los problemas y cómo solucionarlos cada vez que se devuelven 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.
- Previsibilidad y coherencia: Los usuarios pueden predecir el propósito de cada elemento. Se ve claramente cómo se relaciona cada elemento con el sistema en su totalidad.
- Tiempo y conservación: Los usuarios tienen suficiente tiempo para completar sus tareas y no pierden información si se les acaba 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 están animados. Los usuarios no deben distraerse ni sufrir ningún otro daño 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 comprendas los conceptos básicos de estas heurísticas de accesibilidad, podrás aplicarlos a un arquetipo o diseño con la hoja de trabajo 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 | Excelente (+2 pt) | Aprobaciones (1 pt) | Fails (-1 pt) | N/A (0 pt) |
|---|---|---|---|---|
| ¿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 primero? | ||||
| ¿El elemento de 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 revela 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 que se encuentren o corregir las omisiones que sean fundamentales para respaldar 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 decisiones creativas y describir diferentes aspectos del diseño. Las anotaciones de accesibilidad se enfocan en las áreas en las que los desarrolladores pueden tomar decisiones programáticas más accesibles con la orientación del equipo de diseño o de un especialista en accesibilidad.
Las anotaciones de accesibilidad se pueden aplicar en cualquier etapa del proceso de diseño, desde los esquemas de página hasta las simulaciones 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 provienen del kit de anotaciones de accesibilidad de Indeed.com para Figma.
Según tu programa de diseño, deberías tener varios kits de inicio de anotaciones 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 combinaciones de colores diferentes de la paleta.
- Botones y vínculos: Identifica los estados predeterminado, de desplazamiento, activo, de enfoque y de inhabilitación.
- Vínculos para omitir: Destacan los aspectos de diseño ocultos y visibles, y a dónde dirigen en la página.
- Imágenes e íconos: Se agregaron recomendaciones de texto alternativo para imágenes e í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 elementos en los que se puede hacer clic, efectos de desplazamiento y área de enfoque.
- Teclado: Identifica dónde debe comenzar el enfoque (detención 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 asistencia debe reconocer el elemento.