Piensa en tu sitio web o app favoritos. ¿Qué los hace favoritos? Ahora, piensa en un sitio web o una aplicación que no te guste: ¿qué es lo que no te gusta de él? La forma en que los usuarios interactúan con tu diseño y su experiencia en tu sitio web y aplicación puede variar.
Esa experiencia puede cambiar según la hora del día, el tipo de dispositivo que se use, si durmió lo suficiente la noche anterior, si no se siente bien, si usa tecnología de accesibilidad 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 necesidades potenciales de los usuarios al mismo tiempo? Ingresa al diseño inclusivo. El diseño inclusivo utiliza un enfoque centrado en los humanos que combina la inclusión, la usabilidad y la accesibilidad en uno.
A diferencia del diseño universal, que se centra en un diseño único que tantas personas pueden usar como sea posible, los principios del diseño inclusivo se centran en diseñar para una persona específica o un caso de uso y, luego, extender ese diseño a otros.
Existen siete principios de diseño inclusivo enfocados en la accesibilidad:
- Brindar una experiencia comparable: Asegúrate de que la interfaz brinde una experiencia equitativa para todos, de modo que los usuarios puedan realizar las tareas de una manera que se adapte a sus necesidades sin afectar la calidad del contenido.
- Considera la situación: Asegúrate de que la interfaz brinde una experiencia valiosa a los usuarios, independientemente de sus circunstancias.
- Sé coherente: usa convenciones conocidas y aplícalas de forma lógica.
- Permite el control: Garantiza que las personas puedan acceder al contenido e interactuar con él de la manera que prefieran.
- Elección de ofertas: Considera ofrecer diferentes maneras para que las personas completen las tareas, en especial aquellas que son complejas o no estándar.
- Prioriza el contenido: Organiza estos elementos en el orden preferido dentro del contenido y el diseño para ayudar a los usuarios a centrarse en las tareas, las funciones y la información principales.
- Agrega valor: Ten en cuenta el propósito y la importancia de las funciones, y cómo mejoran la experiencia de los diferentes usuarios.
Personas
Al desarrollar un diseño o una función nuevos, muchos equipos dependen de las personas de los usuarios para guiarlos en el proceso. Las personas son personajes ficticios que utilizan tus productos digitales, a menudo, en función de investigaciones cuantitativas y cualitativas sobre los usuarios.
Las personas también ofrecen una forma rápida y económica de probar y priorizar esas características durante todo 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 real a la conversación para alinear la estrategia y crear objetivos centrados en grupos de usuarios específicos.
Incorporación de discapacidades
"Las personas son diferentes. Solo puedo hablar desde mi experiencia. Cuando conoces a una persona sorda, conoces a una, no todos".
Meryl Evans, de la charla de ID24, Deaf Tech: Travel Through Time from Past to Future.
Las personas pueden usarse como una herramienta de diseño inclusiva cuando incorporas a personas con discapacidades en tus personas. Hay muchas formas de hacerlo. Puedes crear personas específicas para personas con discapacidades, agregar discapacidades a las de los usuarios existentes o incluso crear un espectro de personas para reflejar la realidad dinámica de las discapacidades situacionales, temporales y permanentes.
No importa cómo incorpores a las personas con discapacidad en tus personas, no deben basarse en personas reales o estereotipos. Y las personas 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 debido a la enfermedad de Parkinson de aparición joven (YOPD)
- Objetivos: Utiliza la entrada de voz a texto para agregar sugerencias de código más fácilmente; encuentra equipo de ciclismo en línea con la menor cantidad de teclas presionada.
- Frustraciones: Sitios web que no admiten solo el teclado; aplicaciones 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. A lo largo del día, apoya a muchos miembros del equipo. Es la reina de apagar incendios técnicos, y todos acuden al departamento cuando algo sucede de forma inesperada.
Cuando pierde sus habilidades motrices finas debido a los temblores, le resulta cada vez más difícil usar un mouse. Depende cada vez más del teclado para navegar por la Web. Jane siempre estuvo dedicada a su actividad física. Le encantan las carreras de ruta y el BMX. Esto fue aún mayor cuando le diagnosticaron la enfermedad de Parkinson de aparición joven el año pasado.
Simuladores de discapacidades
Ten mucho cuidado cuando uses simuladores de discapacidades para emular o complementar tus arquetipos.
Los simuladores de discapacidad son un arma de doble filo en el que pueden generar simpatía o empatía; puede depender del individuo, el contexto en el que se utiliza el simulador y muchos otros factores incontrolables. Muchos defensores de la accesibilidad recompensan el uso de herramientas del simulador 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 totalmente honestos que las actividades de simulación no afectan algunos de los conceptos más importantes que queremos que las personas videntes conozcan en el corazón y la cabeza. La ceguera no es la característica que nos define, ya 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 falsas limitaciones se convierten en algo que nos detiene".
Mark Riccobono, presidente de la Federación Nacional de Ciegos
Heurística de accesibilidad
Considera agregar heuristics a tu flujo de trabajo a medida que creas las personas y los diseños. La heurística es un conjunto de reglas simples para el diseño de interacciones, introducidas en 1990 por Jakob Nielsen y Rolf Molich. Estos diez principios se desarrollaron a partir de años de experiencia en el campo de la ingeniería de usabilidad y, desde entonces, se han utilizado en programas de diseño y de interacción persona-computadora.
En 2019, el equipo de diseño de Deque creó y compartió un nuevo conjunto de heurística enfocada en la accesibilidad digital. Según sus investigaciones, se puede evitar hasta el 67% de todos los errores de accesibilidad de un sitio web o una app cuando la accesibilidad es parte del proceso de diseño. Esto genera un gran impacto que se puede lograr incluso antes de que se escriba una sola línea de código.
Al igual que el conjunto original de heurísticas, hay diez heurísticas de accesibilidad para tener en cuenta a la hora de planificar 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 prefieran (como mouse, teclado, táctil, 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 con facilidad.
- Estructura y semántica: Los usuarios pueden comprender la estructura del contenido de cada página y entender cómo operar dentro del sistema.
- Prevención y estados de errores: 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 muestran errores.
- Contraste y legibilidad: Los usuarios pueden distinguir y leer fácilmente texto y otra información significativa.
- Idioma y legibilidad: Los usuarios pueden leer y comprender el contenido fácilmente.
- Previsibilidad 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 conjunto.
- Plazos y conservación: Los usuarios tienen tiempo suficiente 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 elementos de la página que se mueven, parpadean o están animados. Los usuarios no deben distraerse ni dañarse de otra manera con 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 un diseño mediante la hoja de cálculo de heurística de accesibilidad y las instrucciones proporcionadas. Este ejercicio es más esclarecedor cuando reúnes múltiples 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:
Después de que todos los miembros del equipo observan la página o el componente y realizan su revisión heurística de accesibilidad, los totales se calculan para cada punto de control. En este punto, puedes decidir cómo solucionar los problemas detectados o corregir las omisiones que son primordiales para admitir la accesibilidad digital.
Anotaciones de accesibilidad
Antes de entregar el diseño al equipo de desarrollo, considera agregar anotaciones de accesibilidad. En general, las anotaciones se utilizan para explicar las elecciones de creatividades 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 orientación 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 esquemas de página hasta simulaciones de alta fidelidad. Pueden incluir flujos de usuarios, estados condicionales y funciones. A menudo, utilizan 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, debes tener varios kits de inicio de anotaciones de accesibilidad para elegir. O, si lo prefieres, puedes crear tu propio conjunto. En cualquier caso, debes decidir qué información debe comunicarse al equipo de traspaso y qué formato funciona mejor.
Estas son algunas áreas que se deben tener en cuenta para las anotaciones de accesibilidad:
- Color: Incluye relaciones de contraste de todas las diferentes combinaciones de colores de la paleta.
- Botones y vínculos: Identifica los estados predeterminado, de desplazamiento, activo, de enfoque y inhabilitado.
- Omitir vínculos: Destaca los aspectos de diseño ocultos/visibles y el punto en el que están vinculados en la página.
- Íconos y imágenes: Agrega recomendaciones de texto alternativo para imágenes o íconos esenciales.
- Audio y video: Destaca áreas o vínculos de subtítulos, transcripciones y audiodescripciones.
- Encabezados: Agrega niveles programáticos y, además, 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 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 auxiliar, mensajes de error y mensajes de éxito.
- Nombres accesibles: Identifica cómo la tecnología de accesibilidad debe reconocer el elemento.