Patrones de diseño para adulto mayor
Aunque no existe una “norma oficial” única que regente exclusivamente la navegación de adultos mayores, sí hay recomendaciones de peso que surgen de la WCAG 2.2, guías de accesibilidad móvil y estudios de usabilidad con usuarios > 60 años.
A grandes rasgos se repiten dos reglas de oro y cinco bloques de directrices que puedes aplicar directamente a la arquitectura de navegación de tu PWA:
1. Reglas de oro (mencionadas en 15+ estudios)
- Simplificar: reduce el número de pasos y decisiones por pantalla.
- Agrandar y separar: botones ≥ 48 px y espaciado ≥ 8 px para evitar toques involuntarios
Directrices específicas de navegación
Objetivo | Táctica rápida | Detalle |
|---|---|---|
No perderse | Profundidad ≤ 3 niveles; siempre visible “dónde estoy” (breadcrumb o título fijo). | Evita menús anidados complejos . |
Salida segura | Botón “Atrás” o “Cancelar” en cada pantalla; cierra diálogos con el mismo gesto. | Reduce ansiedad y errores . |
Foco cognitivo | Una acción principal por pantalla; oculta funciones secundarias bajo “Más opciones”. | Usa progressive disclosure . |
Consistencia | Misma zona para acciones críticas (ej. “Continuar” siempre abajo-derecha). | Aprovecha la memoria motriz . |
Ayuda in-contexto | Tooltip o walk-through brevela 1.ª vez; siempre accesible desde el menú “Ayuda”. | No interrumpa el flujo normal . |
Aspectos de diseño visual que afectan la navegación
- Contraste mínimo 4,5:1 (WCAG AA) para textos de menú.
- Tipografía base ≥ 16 px y escalable con unidadesrem/em .
- Iconos + etiqueta textual; evita solo iconos ambiguos.
- Paleta limitada: máx. 3 colores funcionales para indicar estado (activo/inactivo/error).
Consideraciones táctiles y gestos
- Zona táctil 44-48 px; espacio mín. 8 px entre enlaces.
- Gestos simples: tap y swipe horizontallento; evita doble-tap o “mantener pulsado” como única vía.
- Indicadores visuales de swipe (puntitos o borde que sobresale)
Cumplimiento legal
- WCAG 2.2 (nivel AA) es referencia obligatoria en UE (EAA 2025) y recomendación legal en LATAM.
- U.S. ADA se ha demandado por apps no accesibles; las PWA entran en el mismo saco que sitios web.
- Añadir aria-label a botones de navegación y asegurar reordenación lógica del foco cuando se activa el teclado virtual.
Check-list exprés para tu PWA
- Menú principal ≤ 5 opciones visibles; resto en “Más”.
- Cada pantalla: título<h1>, botón “Atrás” y breadcrumb si profundidad > 2.
- Tamaño mín. 48 px y espaciado 8 px en todos los controles.
- Contraste 4,5:1 y texto 16 px base.
- Tutorial de 3 pasos desactivable; siempre accesible vía “Ayuda”.
Progressive disclosure: Es una técnica de diseño UX que muestra al usuario sólo lo mínimo e imprescindible en cada momento y va revelando opciones o información adicional solo cuando el usuario las solicita o realmente las necesita.
Objetivo: reducir la carga cognitiva, evitar la sensación de “demasiado a la vez” y que personas con distinto nivel de experiencia (sobre todo adultos mayores o usuarios nuevos) puedan avanzar paso a paso sin sentirse abrumados.
¿Cómo se aplica en la práctica?
| Patrón | Ejemplo concreto |
|---|---|
| Paso a paso (wizard) | Un formulario de pago que primero pide dirección, luego envío y por último tarjeta. |
| Desplegable / acordeón | “Más opciones de búsqueda” ocultas hasta que el usuario pulse “Búsqueda avanzada”. |
| Contextual | Al seleccionar “Enviar a otro país” aparece el campo “Código postal internacional”. |
| Modal o pop-up | Botón “Ayuda” que abre una capa con instrucciones sin abandonar la pantalla actual. |
Por qué es crítico para adultos mayores
- Procesamiento más lento: presentar de golpe muchos campos o botones aumenta errores y frustración .
- Memoria de trabajo limitada: si la tarea se parte en pasos pequeños no tienen que recordar tantas cosas al mismo tiempo.
Mini-checklist para usarlo bien
- Muestra una acción principal por pantalla; el resto queda en “Más opciones”.
- Etiqueta clara: usa texto + icono (ej. “Configuración avanzada ▾”).
- Mantén contexto visible: cuando se expanda una sección no desplaces fuera de pantalla lo que ya había.
- Permitir volver atrás sin perder datos.
- No fuerces al usuario a abrir secciones avanzadas para completar una tarea básica.
En resumen, progressive disclosure convierte interfaces complejas en cursos de “nivel 1 → nivel 2 → nivel 3”, algo especialmente beneficioso para personas mayores o cualquier usuario que prefiera avanzar poco a poco y sin sustos.
Comentarios
Publicar un comentario