Estos Principios de Diseño Inclusivo ponen la importancia en las personas. La base es diseñar teniendo en cuenta las necesidades de gente con discapacidades permanentes, temporales, contextuales - o sea, nosotros todos.
Se dirigen a todos participantes en el diseño y desarollo de sitios web: diseñadores, profesionales de la experiencia del usuario, programadores, managers de productos, innovadores, artistas, pensadores.
Los Principios
Proporciona experiencias comparables
Asegura que la interfaz permite hacer tareas de maneras convenientes para todos, sin perder calidad del contenido.
Descripción completa
Sea por circunstancias, contexto, o decisión propia, las personas son diversas. Usan métodos y herramientas distintas para interactuar con una aplicación. Lo que la interfaz ofrece a cada uno debe ser comparable en valor y calidad.
Ejemplos
- Contenido alternativo: Un alternativo básico, sea texto "alt", una transcripción, descripción auditiva, o lenguaje de signos, hacen contenido accesible pero para ser equivalente hay que capturar la esencia del original.
- Caracteristicas de ergónomia: Proporcionar subtítulos sincronizados hace un video accesible. Pero hacerlos customizábles, colorados, y permitiendo moverlas da una experiencia más comparable.
- Notificaciones: Notificaciones que aparecen en la interfaz son obvios visualmente, pero
para usuarios ciegos falta trabajan para descubrirlas. Una experiencia comparable se consigue usando una
región de tipo
aria-live. Así el usuario no necesita hacer nada especial para recibir las notificaciones.
Enlace a sección Proporciona experiencias comparables
Considera la situación del usuario
La interfaz se usa en contextos distintos. Asegura que proporcione una experiencia buena en cualquiera situación.
Descripción completa
Hay usuarios principiantes, expertos, al trabajo, en casa, viajando, bajo presión. Cada situación tiene su impacto. Para los que ya tienen dificultad en interactuar, por ejemplo por alguna discapacidad, este impacto puedo hacer la interfaz aun más difícil de usar.
Ejemplos
- Contraste de colores: Afuera, un nivel alto de contraste minimiza el impacto del sol en la visibilidad de la pantalla.
- Ayuda contextual: Un usuario puede necesitar ayuda la primera vez que encuentran un formulario u otra interacción. Pero puede ser innecesario, o aún distraer, cuando se acostumbra a la interfaz. Ayuda contextual permite al usuario elegir cuando la pide, dando así mejor control.
- Subtítulos en el camino: Video se mira en dispositivos móviles, incluso en lugares públicos. Para pantallas pequeñas, apaga el sonido y pon los subtítulos por defecto. El usuario puede disfrutarlo sin molestar a los que están alrededor.
Se consistente
Usa convenciones, de manera consistente.
Descripción completa
Componentes de interfaz reflejan patrones establecidos y conocidos que hacen su sentido más obvio. En funcionalidad, comportamiento, aparencia y estilo escrito, se debe decir las cosas de la misma manera y usuarios deben poder hacer acciones similares de maneras parecidas.
Ejemplos
- Patrones de diseño coherentes: Usa patrones de diseño consistentes para reforzar la comprensibilidad y familiaridad.
- Consistencia de lenguaje: Usa lenguaje sencillo de manera consistente, incluso texto importante para usuarios de lectores de pantalla cómo texto alternativo, encabezadas, y etiquetas de controles. También importan elementos del estilo cómo un resumen, bien señalado cómo tal, al principio de secciones, o destacar términos definidos en listados.
- Arquitectura consistente: Usa arquitectura consistente en plantillas de paginas, para facilitar navegación y comprensión rápida.
Deja el usuario mandar
Asegura que el usuario es quien manda. Debe poder interactuar con el contenido de manera que le conviene.
Descripción completa
No suprime opciones para cambiar características como orientación de la pantalla, tamaño del texto, nivel de magnificar, contraste y colores. Tampoco cambia contenido salvo por a una interacción explicita de parte del usuario.
Ejemplos
- Desplazamiento: El 'Desplazamiento Infinito' (cuando se agrega contenido automáticamente) puede implicar problemas para usuarios del teclado, por que nunca pueden pasar el flujo de contenido. Permite apagarlo poniendo un botón para actualizar.
- Para: Para algunos usuarios animaciones o "parallax scrolling" pueden distraer, marear, o peor. Si empiezan automáticamente, deben ser fáciles de parar por controles prominentes.
- Permite magnificar: Hay muchas razones para querer magnificar una pagina. Asegura que no está suprimida, y que el contenido no se esconde cuando está magnificada.
Ofrece opciones
Proporciona maneras diversas de cumplir tareas, sobre todo los que son complejos o poco familiares.
Descripción completa
Normalmente hay más de una manera de cumplir un tarea, y no se puede presumir cual sera preferida por un usuario. Proporciona alternativas para la maquetación de información, y los procesos para cumplir tareas. Ofrece opciones que permite el usuario elegir la que le conviene en cada contexto.
Ejemplos
- Diversas maneras para hacer una acción: Ofrece maneras distintas para hacer una acción. Por ejemplo para borrar un objeto,se puede permitir una interacción directa, sea un gesto en pantalla táctil o una tecla de atajo, así que seleccionar objetos y tocar una botón de borrar - cómo se ve en clientes de correo.
- Maquetación: Cuando hay listados largos, ofrece una maquetación en tablas. Eso ayuda usuarios quien prefieren imágenes grandes, o contenido en bloques pequeños.
- Alternativas accesibles: Diversas maneras de presentar información, como tablas de datos e infográficos, deben estar disponibles para todos usuarios, no escondidos y sólo ofrecidos a usuarios de lector de pantalla. Esas alternativas pueden ayudar a todos usuarios, no sólo un grupo arbitrario, si ofreces la opción
Prioriza el contenido
Ayuda el usuario a enfocarse en tareas, funciones y contenidos importantes por destacarlos en el contenido y maquetación.
Descripción completa
Puede ser más difícil entender una interfaz si las partes más importantes no se destacan. Un sitio puede ofrecer mucha información y funcionalidad, pero debe permitir el usuario enfocarse en una cosa a la vez. Identifica la función clave de la interfaz, y el contenido y controles que se dirigen a ésta función.
Ejemplos
- Enfocar en la tarea actual: Muestra funcionalidádes y contenido cuando son relevantes, no todos al principio.
- Prioriza tareas: Una app de correo permite principalmente leer y escribir mensajes. Entonces haz el botón para escribir un nuevo mensaje está siempre disponible, y prominente incluso por ser un de los primeros en el orden de enfocar. Igualmente, pon el "inbox" antes de otros listados cómo los enviados, o del spam, con funciones menos usados, cómo etiquetar o mover mensajes después en el orden de enfocar, dado que se usan normalmente después de las funciones básicas de leer.
- Ordenar el contenido: Pon el contenido primario de una noticia primero, tanto visualmente que en el orden del contenido en el código fuente. Síguelo con contenidos relacionados cómo artículos parecidos, y después contenido sin relación directa.
- Usa lenguaje claro: En el texto de los enlaces, encabezados, y botones usa lenguaje sencillo y claro, poniendo primero la información más importante, sea para texto visto o escondido por defecto. Eso facilita escaneár el texto, sea visualmente o por audio, por ejemplo con un lector de pantalla. Lenguaje claro también ayuda a los que tienen otro idioma materna, y se traduce más fácilmente.
Agrega valor
Considera el valor de funciones y características, y cómo mejoran la experiencia de usuarios diversos.
Descripción completa
Funciones y características deben mejorar la experiencia del usuario, proporcionando maneras eficaces de encontrar e interactuar con el contenido. Considera funcionalidades de dispositivo cómo interreacción por voz, géolocalizacion, la camera, o vibración, y cómo integración con dispositivos conectados pueden ofrecer opciones más convenientes.
Ejemplos
- Integración con dispositivos conectados, o "pantalla segunda": Usando interacción por voz para controlar contenido multimedia o buscar contenido ayuda a gente quien pueden tener dificultad con otras interfaces.
- Integración con funcionalidádes del plataforma: Usa vibración para hacer notificaciones más claras para gente sorda o con dificultad auditiva, y géolocalizacion para facilitar el uso de servicios locales por usuarios con dificultades de moverse.
- Facilita tareas: Permite ver contraseñas para permitir usuarios de verificar que las han escrito bien. Permite identificación por huella digital así que por contraseña.