Diseño de sitios web para todas las edades y habilidades

Piensa en la variedad de personas que podrían visitar tu sitio web en un día cualquiera. Un adolescente navegando con el pulgar en la pantalla rota de su teléfono en un autobús en movimiento. Un padre ocupado medio mirando mientras hace malabares con un niño pequeño. Un abuelo que lee despacio y entrecierra los ojos ante el texto pequeño. Alguien que no puede usar un ratón y navega completamente con el teclado. Alguien que es daltónico, o está cansado, o simplemente tiene prisa. Cada uno de ellos merece usar tu sitio sin dificultades, y lo notable es que diseñar para todos ellos a la vez no significa comprometer la calidad. Normalmente significa un sitio web mejor para todos.

Este es el corazón del diseño inclusivo: construir experiencias que funcionen para la gama más amplia posible de personas, en todas las edades y habilidades, sin señalar a nadie para un trato especial. En esta guía exploraremos cómo se ve eso en la práctica. Cubriremos la legibilidad, el diseño, la forma en que las personas interactúan físicamente con una página, los viajes que les pides que completen y las pequeñas decisiones que silenciosamente dan la bienvenida o excluyen. Nada de esto requiere que seas un especialista. Solo requiere que recuerdes que tus visitantes son seres humanos gloriosamente variados, no un único usuario promedio imaginado.

El diseño inclusivo no es una preocupación marginal

Existe un mito persistente de que diseñar para personas mayores o personas con discapacidades es un extra pequeño y opcional, una casilla que marcar si tienes tiempo. La realidad es lo contrario. Una gran parte de la población tiene alguna forma de discapacidad, ya sea visual, auditiva, de movimiento o de atención, y esa proporción crece a medida que las poblaciones envejecen. Si añadimos situaciones temporales —un brazo roto, luz solar brillante en una pantalla, una habitación ruidosa—, casi todos se benefician de las decisiones inclusivas en algún momento.

El diseño inclusivo está estrechamente relacionado con la práctica formal de la accesibilidad, pero es un poco más amplio y amigable en espíritu. Mientras que la accesibilidad a menudo se centra en cumplir estándares específicos, el diseño inclusivo plantea una pregunta más simple en cada decisión: ¿a quién podría excluir esto y cómo puedo incluirlos? Si deseas la base técnica detrás de estos principios, nuestra guía sobre conceptos básicos de accesibilidad web es la siguiente lectura natural.

Texto que la gente realmente pueda leer

La barrera más común en la web es también la más fácil de solucionar: texto demasiado pequeño, demasiado tenue o demasiado apretado. El texto legible es la base de un sitio inclusivo y ayuda absolutamente a todos, no solo a aquellos con problemas de vista.

Tamaño, contraste y espaciado

Empieza con un tamaño de texto base cómodo, más grande de lo que los diseñadores suelen elegir instintivamente. Dale a tus líneas un espaciado generoso para que no se mezclen, y mantén las longitudes de línea moderadas para que el ojo no pierda su lugar. Luego, comprueba tu contraste: texto oscuro sobre un fondo claro, o claro sobre oscuro, con suficiente diferencia entre ambos para que alguien con visión reducida pueda leerlo fácilmente. El texto gris pálido sobre un fondo blanco puede parecer elegante a un diseñador joven con vista perfecta, pero excluye a una parte considerable de tu audiencia.

Permite que la gente cambie el tamaño sin estropear nada

Muchas personas hacen zoom o aumentan el tamaño del texto de su dispositivo. Un sitio bien construido se adapta elegantemente cuando lo hacen, en lugar de superponer o cortar palabras. Esta flexibilidad se superpone directamente con los principios del diseño web responsivo: un diseño que se adapta al tamaño de la pantalla, por lo general, también se adapta al tamaño del texto.

Color que no conlleva un significado oculto

El color es una herramienta maravillosa, pero nunca debe ser la única forma de comunicar algo importante. Una trampa clásica es un formulario que pone un campo en rojo para indicar un error, algo invisible para alguien que no puede distinguir el rojo del verde. El remedio es combinar el color con una segunda señal: un mensaje escrito, un icono, un subrayado. De esa manera, el significado se mantiene independientemente de cómo una persona perciba el color. El uso inteligente del color se une a otras elecciones que hacen que un sitio se sienta pulido y profesional en lugar de caótico.

Diseñando para manos, no solo para ojos

La forma en que las personas interactúan físicamente con tu sitio varía enormemente. Algunos usan un ratón preciso, otros un dedo en la pantalla táctil, otros solo un teclado y otros dispositivos de asistencia que quizás nunca hayas visto. El diseño inclusivo los acomoda a todos.

Haz los objetivos grandes y tolerantes

Los botones y enlaces deben ser lo suficientemente grandes como para tocarlos con confianza y estar lo suficientemente separados como para que una pulsación ligeramente errónea no active lo incorrecto. Esto ayuda a personas con manos temblorosas, dedos grandes o en un tren inestable, es decir, a casi todos en algún momento. Los objetivos generosos y bien espaciados son también un sello distintivo de una jerarquía visual clara, donde las acciones importantes son fáciles de encontrar y de ejecutar.

Todo debe funcionar con el teclado

Un número sorprendente de personas nunca toca un ratón, navegando en su lugar con el teclado o un dispositivo que lo imita. Si tus menús, botones y formularios solo responden a un clic, has bloqueado a estos visitantes. Una buena prueba es dejar el ratón a un lado e intentar completar una tarea clave usando solo el teclado. Si te quedas atascado, ellos también lo harán.

Los recorridos sencillos superan a los inteligentes

Más allá de cómo se ve y se siente una página, el diseño inclusivo se trata de cuánto se les pide a las personas. Formularios largos, procesos de compra de varios pasos y redacción confusa, todo esto aumenta la carga cognitiva: el esfuerzo mental que se necesita para lograr algo. Cuanto mayor sea esa carga, más personas abandonarán, y los primeros en abandonar suelen ser aquellos que ya enfrentan otras barreras.

La solución es la generosidad: pide solo lo que realmente necesitas, divide las tareas largas en pasos claros, usa un lenguaje sencillo en lugar de jerga y dile a la gente exactamente qué sucederá a continuación. Estos mismos instintos son los que hacen que un sitio web convierta visitantes en clientes, porque reducir la fricción ayuda a todos, no solo a aquellos con necesidades específicas. Cuando las personas sienten que las microinteracciones y la retroalimentación son claras y tranquilizadoras, se relajan, un tema explorado más a fondo en nuestro artículo sobre microinteracciones en el diseño web.

Movimiento y sonido, manejados con cuidado

La animación y la reproducción automática de medios pueden deleitar, o pueden abrumar. Algunas personas experimentan mareos o molestias por los grandes elementos en movimiento, y otras encuentran el sonido repentino molesto o imposible de seguir. El diseño inclusivo mantiene el movimiento suave, ofrece a las personas una forma de pausar o detener cualquier cosa que se mueva por sí sola, y nunca se basa solo en el sonido para transmitir significado. Un título corto o una transcripción hacen que el video y el audio sean utilizables por personas que no pueden escucharlos, y por cualquier persona en una oficina tranquila o una cafetería ruidosa.

Los visitantes mayores merecen una consideración especial

A medida que las personas envejecen, varias cosas tienden a cambiar a la vez: la vista se suaviza, el control motor fino se vuelve menos preciso y los patrones desconocidos tardan más en aprenderse. Un visitante mayor no es menos capaz, pero es menos tolerante con el mal diseño. Un texto más grande, botones más grandes, diseños predecibles e instrucciones claras ayudan. Fundamentalmente, evita las interacciones de moda que ocultan cosas importantes detrás de gestos o iconos sin explicar. El diseño más claro es el que no necesita explicación, y esa claridad es parte de lo que hace que una página de inicio funcione bien para los visitantes primerizos de cualquier edad.

Prueba con personas reales y variadas

Puedes leer todas las guías del mundo y aun así pasar por alto problemas que solo surgen cuando una persona real intenta usar tu sitio. Lo más valioso que puedes hacer es observar a personas que son genuinamente diferentes a ti —diferentes edades, diferentes habilidades, diferente comodidad con la tecnología— intentar tareas reales. Sus tropiezos te enseñarán más que cualquier lista de verificación. El rendimiento también juega un papel: una página lenta y pesada es más difícil para aquellos con dispositivos antiguos o conexiones más débiles, por lo que mantener las cosas ligeras apoya la inclusión tanto como el rendimiento móvil en general. Si deseas una mirada fresca y experta sobre si tu sitio realmente da la bienvenida a todos, siempre puedes ponerte en contacto.

Preguntas frecuentes

Referencias

1. Organización Mundial de la Salud. "Discapacidad y Salud." who.int.
2. Iniciativa de Accesibilidad Web del W3C. "Accesibilidad, Usabilidad e Inclusión." w3.org.
3. Nielsen Norman Group. "Accesibilidad y Diseño Inclusivo." nngroup.com.