UX para personas mayores: claridad, tamaño y confianza en el diseño web

En una sesión de pruebas para una clínica conocimos a una paciente de 78 años que reserva sus citas por internet desde hace años. Lo hace bien, con calma, y con una libreta al lado donde apunta cada usuario y cada contraseña. Cuando una web le funciona, la usa una y otra vez. Cuando no, no insiste: llama por teléfono o le pide a alguien de la familia que lo haga. Esa diferencia, entre la web a la que vuelve y la que abandona, casi nunca tiene que ver con la tecnología. Tiene que ver con decisiones de diseño muy concretas.

En el estudio trabajamos a menudo con clínicas, farmacias, aseguradoras, inmobiliarias y hoteles de la Costa del Sol, donde una parte importante del público tiene más de 65 años, muchas veces residentes extranjeros. Y hemos aprendido que diseñar bien para las personas mayores es uno de los ejercicios que más mejora una web para todo el mundo.

Esta guía recoge lo que funciona: medidas, criterios y una forma de mirar que pone por delante el respeto. Las personas mayores son tan diversas como cualquier otro grupo, y conviene recordarlo antes de empezar.

01Un público grande, diverso y exigente

Según el INE, una de cada cinco personas que viven en España tiene 65 años o más, y la proporción sigue creciendo. Dentro de ese grupo hay de todo: profesionales recién jubilados que usan el móvil con más soltura que sus nietos, personas de 85 años que se iniciaron en internet durante la pandemia, gente con una vista excelente y gente con una degeneración macular.

Lo que comparten no es un nivel de habilidad, sino una tendencia a ciertos cambios físicos y cognitivos que llegan con la edad y que se pueden anticipar en el diseño. Nielsen Norman Group lleva desde 2002 estudiando la usabilidad para personas mayores y, en sus sucesivas ediciones, ha observado que tardan más en completar tareas que los adultos más jóvenes y que abandonan antes cuando algo les confunde. La buena noticia de esos mismos estudios es que la mayoría de dificultades vienen de problemas de diseño que perjudican a todo el mundo, solo que a ellas les afectan más.

Clave: diseñar para personas mayores no es simplificar ni infantilizar. Es dar claridad, tamaño y tiempo, y tratar a cada persona como la adulta experimentada que es.

02Lo que cambia con la edad y cómo responder en el diseño

Esta tabla resume los cambios más habituales y la respuesta de diseño que aplicamos en cada caso. Es la base de todo lo demás.

Ninguna de estas respuestas es exclusiva para mayores. Todas forman parte de un buen diseño inclusivo, que tratamos con más amplitud en diseño inclusivo más allá de WCAG.

03Claridad visual: texto, contraste y espacio

La legibilidad es lo primero que se nota y lo primero que se agradece.

Tamaño y tipografía

Para el texto principal, en nuestros proyectos partimos de 18 píxeles en escritorio y nunca bajamos de 16 en móvil, con un interlineado de 1,5 a 1,6 y líneas de 60 a 75 caracteres. Las tipografías sin serifa de formas abiertas y con una altura de x generosa, como Atkinson Hyperlegible (diseñada por el Braille Institute), Inter o Source Sans, funcionan muy bien en pantalla. Si quieres profundizar en medidas y escalas, lo desarrollamos en tipografía web y legibilidad.

Igual de importante es respetar las preferencias de la persona. Muchas personas mayores aumentan el tamaño de letra en el móvil o hacen zoom en el navegador. La web debe adaptarse sin romperse ni obligar a desplazarse en horizontal.

/* Base legible que respeta el tamaño elegido por la persona */
html { font-size: 100%; }
body {
  font-size: 1.125rem;   /* 18 px con la configuración por defecto */
  line-height: 1.6;
  color: #1c1c1c;        /* casi negro sobre blanco: contraste muy alto */
  background: #ffffff;
}
p, li { max-width: 68ch; }
a { text-decoration: underline; text-underline-offset: 0.2em; }
.button {
  min-height: 3rem;      /* unos 48 px */
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
}

Contraste y color

WCAG pide un contraste mínimo de 4,5:1 para el texto normal. Para públicos mayores conviene apuntar más alto, hacia el 7:1 del nivel AAA, en todo el texto de lectura. Los grises claros que tan elegantes quedan en una pantalla de diseñador son, para una persona de 75 años con el móvil al sol, casi invisibles.

Espacio y jerarquía

Mucho espacio en blanco, bloques claramente separados y una sola idea por sección. Las páginas muy densas obligan a un esfuerzo de búsqueda que cansa antes. Una jerarquía visual clara, con titulares que dicen lo que hay debajo, ayuda a orientarse a la primera.

04Interacción: botones, navegación y formularios

Botones y enlaces que se ven y se pulsan

• →Botones con aspecto de botón: fondo, borde, texto claro. Los botones «fantasma», solo con texto, pasan desapercibidos.
• →Objetivos táctiles de 44 × 44 píxeles o más, como recomienda Apple, por encima del mínimo de 24 × 24 de WCAG 2.2, y con espacio suficiente entre ellos.
• →Enlaces subrayados en el texto, porque el color solo no siempre se distingue.
• →Textos de botón que digan la acción completa: «Pedir cita», mejor que «Continuar». En la guía de botones en UI lo detallamos.

Navegación predecible

• →Menú visible con palabras, en lugar de iconos sueltos, siempre que el espacio lo permita. En móvil, el icono de hamburguesa acompañado de la palabra «Menú».
• →Un enlace claro para volver al inicio y migas de pan en webs con varios niveles.
• →Nada que dependa solo del gesto de pasar el ratón por encima (hover) o de deslizar.
• →Que el botón de atrás del navegador funcione siempre como se espera, sin perder lo escrito.

Formularios amables

1. 01Pide solo lo imprescindible y explica por qué pides cada dato sensible.
2. 02Etiquetas siempre visibles encima del campo, nunca solo como texto de ejemplo dentro.
3. 03Acepta formatos flexibles: teléfonos con o sin espacios, fechas escritas de varias formas.
4. 04Mensajes de error junto al campo, en lenguaje claro y diciendo cómo arreglarlo.
5. 05Sin límites de tiempo, o con aviso previo y opción de ampliarlo, como pide el criterio 2.2.1 de WCAG.
6. 06Códigos de verificación que se puedan pegar, con plazo amplio y con la opción de reenviarlos de forma visible.
7. 07Un resumen antes de confirmar y una confirmación clara después, también por email.

05Lenguaje claro y tono respetuoso

Las palabras importan tanto como los píxeles. Funcionan las frases cortas, las palabras comunes y los verbos en activo. Funcionan menos los anglicismos («checkout», «login», «newsletter»), las siglas sin explicar y la jerga del sector.

Igual de importante es el tono. Lo que funciona es hablar de tú o de usted según la marca, pero siempre como a una persona adulta: sin diminutivos, sin exceso de signos de exclamación, sin explicaciones que suenen a lección. Las imágenes también comunican: mostrar a personas mayores activas y reales, en situaciones cotidianas, conecta mucho mejor que las fotos de archivo de abuelos sonrientes ante un portátil.

06Confianza: la gran asignatura

Si hay un aspecto que diferencia la experiencia de las personas mayores, es la confianza. Muchas han recibido avisos sobre estafas, mensajes falsos de bancos y webs fraudulentas, y desarrollan una prudencia muy sana. Una web que quiere su confianza tiene que ganársela con señales claras:

• →Quién eres: nombre de la empresa, dirección física, años de trayectoria y, si es posible, fotos del equipo y del local.
• →Un teléfono visible en todas las páginas, con horario de atención, y la opción de hablar con una persona.
• →Precios completos desde el principio, sin costes que aparecen al final.
• →Ausencia de prisas artificiales: contadores, ventanas emergentes y avisos de «últimas unidades» generan desconfianza.
• →Pagos con métodos conocidos y la posibilidad de pagar al recoger o por transferencia cuando el negocio lo permita.
• →Confirmaciones por escrito de todo lo que se ha hecho, con los datos de contacto.

Lo desarrollamos con más detalle en la guía sobre señales de confianza digital.

07Un ejemplo resuelto: los encargos online de una farmacia

Una farmacia de barrio quiere que sus clientes puedan encargar productos de parafarmacia y reservar servicios, como la medición de tensión, desde la web. Más de la mitad de su clientela habitual tiene más de 65 años.

Lo que observamos en una mañana de pruebas con seis clientes de entre 66 y 82 años, en sus propios móviles:

1. 01Cuatro de seis no encontraron el menú, un icono de tres rayas sin texto.
2. 02Los precios estaban en gris claro sobre fondo crema y costaba leerlos al aire libre.
3. 03El registro pedía crear una contraseña con requisitos que se mostraban solo tras fallar.
4. 04El selector de hora para el servicio de tensión era una rueda que había que deslizar con precisión.
5. 05Todos preguntaron, de una forma u otra, «¿y esto cómo sé que lo ha recibido la farmacia?».

Lo que cambiamos.

1. 01Menú con la palabra «Menú» y los tres apartados principales visibles también en la portada.
2. 02Texto base de 18 px y precios en casi negro, con contraste superior a 7:1.
3. 03Encargo sin registro obligatorio: nombre, teléfono y producto, con la opción de crear cuenta después.
4. 04Selección de hora mediante botones grandes con las franjas disponibles.
5. 05Pantalla de confirmación con el nombre de la farmacéutica que prepara el encargo, el horario de recogida y el teléfono, más un SMS de confirmación.

El resultado, en palabras de la propia farmacéutica unas semanas después: más encargos online de clientes de siempre y muchas menos llamadas para preguntar si había llegado el pedido. Y una observación que nos encantó: los clientes jóvenes también decían que la web nueva era «mucho más fácil».

08Diseñar con respeto, para todas las edades

Diseñar bien para las personas mayores es, en el fondo, diseñar con respeto: por su tiempo, por su experiencia y por su derecho a hacer las cosas por sí mismas. Cuando lo conseguimos, la web gana claridad para todo el mundo y la marca gana algo que no se compra: la confianza de un público que valora mucho a quien le trata bien.

En SIMA aplicamos estos criterios en cada proyecto de diseño web y experiencia digital, y con especial cuidado en sectores como la salud, los seguros o el turismo residencial. Si tu web tiene un público mayor y quieres que lo disfrute de verdad, escríbenos y lo hablamos.