Este documento presenta lineamientos para el diseño de interfaces digitales considerando las diferencias cognitivas entre usuarios. Propone principios como diseñar interfaces simples, con lenguaje claro y procesos divididos en pasos pequeños, además de ofrecer formatos alternativos al texto y control sobre el ritmo de navegación. El objetivo es que la tecnología sea accesible para personas con diferentes capacidades cognitivas.
3. Internet
• Iniciar un tramite
• Pagar cuentas
• Realizar compras
• Consultar direcciones y ver mapas
• Pedir transporte
• Aprender nuevas habilidades
• Anotar recordatorios y notas
@ximemuzza
4. Plan Gobierno Digital 2020
Participación Ciudadana –
Tramites – Salud – Información -
DGREC
Impulsar el uso intensivo de tecnologías como Internet,
dispositivos móviles, plataformas compartidas y el
aprovechamiento de los datos y la información como
parte integral de sus políticas de transformación.
@ximemuzza
5. Funciones Cognitivas
Atención y Foco
Memoria
Juicio y Evaluación
Velocidad de Procc.
Comprensión Visual
Lenguaje
Resolución de Problemas
Social y Emocional
Lógica
Orientación
@ximemuzza
7. Sensomotriz
0-2
Entiende el mundo a
través de los sentidos y
acciones
Pre-operacional
2 a 7
Entiende el mundo a
través del lenguaje e
imágenes mentales
Operaciones
Concretas
7 a 12
Pensamiento lógico y
categórico
Operaciones
Formales
12+
Pensamiento hipotético
y razonamiento
científico
Deterioro
+45
La perdida de
capacidades
cognitivas obedece al
proceso normal de
envejecimiento
Etapas del desarrollo
@ximemuzza
12. Cansancio y Fatiga
Estrés y ansiedad
Apuros
Situaciones de emergencia
Multi-tarea y distracciones
Medicación
Estado anímico
Deficiencias vitamínicas
Circunstancial
@ximemuzza
16. Capacidad Intelectual
Según evaluación Weschler
Leve
IQ 70-50
Capacidades de
aprendizaje
ligeramente
atrasadas
Moderado
IQ 50-35
Autonomía en el cuidado
y desplazamiento. se
adaptan bien a la vida
en comunidad, con
supervisión
Severo
IQ 35-20
Marcado limitación
en la atención y
percepción,
lenguaje elemental
y tareas rutinarias.
Profundo
IQ >20
Desarrollo motor y
oral mínimo, solo
permite aprendizaje
reflejo. Permanente
cuidado.
Media o + 84%
IQ >85
95%
@ximemuzza
18. Principales Barreras
Demasiados objetos compitiendo por la
atención
Procesos largos y complejos
Textos pequeño, sin orden lógico
extenso y complejo.
Inconsistencias, misma acción
devuelve resultados diferentes
Información a destiempo
Exigencias cognitivas innecesarias
LenguajeMemoria
Resolución de
Problemas
Atención
Velocidad de
Procc
@ximemuzza
30. Validar datos en el momento
Validar datos próximos al campo
Ofrecer solo opciones válidas
Validación
AtenciónMemoria
@ximemuzza
31. Ser flexibles en los formatos
aceptados.
Corregir el formato del lado del
sistema
Ofrecer alternativas que
aseguran el formato esperado
Validación
Atención LenguajeMemoria
@ximemuzza
34. Divida procesos complejos en
pasos simples y específicos
Divida información en pedazos
significativos
Presente la información en el
momento que es necesaria
Chunking
AtenciónMemoria
Resolución de
Problemas
@ximemuzza
36. Sin verbosidad, jerga y
tecnicismo.
Frases cortas y concisas
Palabras sencillas
Usa pronombres
Voz activa
Encabezados y listas
Lenguaje Llano
Lenguaje
@ximemuzza
40. Evitar voz pasiva
“El servicio fue cancelado”
“Un correo ha sido enviado con el
número de reclamo”
Lenguaje Llano
Lenguaje Atención
Usar voz activa
“Cancelamos tu servicio”
“Enviamos el numero de
reclamo a tu correo”
@ximemuzza
41. Incluir imágenes relativas a la
información
Incluir iconos u objetos
representativos
Incluir videos y audios o formatos
alternativos al lenguaje
Alternativas
Lenguaje
@ximemuzza
42. Ingredientes
• 2 tazas de harina
• 4 cucharaditas de polvo de hornear
• 1 cucharadita de sal
• 1/3 taza de manteca
• 2/3 taza de leche
Elaboración
1. Mezclar la harina y la sal
2. Agregar la manteca y la leche
3. Amazar y cortar en circulos de 4 cm.
4. Hornear a 230 ºC durante 12 minutos.
Jerarquía y Orden
Lenguaje Atención
Mezclar la harina y la sal. Agregar la manteca y luego la
leche.Mezclar, amasar y cortar en circulos de 4 cm. Hornear a
230 ºC durante 12 minutos. Ingredientes 2 tazas de harina, 4
cucharaditas de polvo de hornear, 1 cucharadita de sal, 1/3 taza
de manteca o aceite, 2/3 taza de leche
@ximemuzza
43. El objetivo es que la información sea
compartida, comprendida y recordable
@ximemuzza
45. Una acción principal por pagina
o paso
Un foco u objetivo mayor por
pagina o paso
Secuencia de pasos claros
Chunking
AtenciónMemoria
Resolución de
Problemas
@ximemuzza
46. Demasiados elementos
compitiendo por la atención
• Use colores y tipografías limitadas
• Fondos lisos
• Espaciados
Simplificar
Atención
@ximemuzza
47. Reducir cantidad de opciones
Evitar pop-ups
Evitar publicidad
Evitar animaciones automáticas
No interrumpir al usuario
Simplificar
Atención
@ximemuzza
48. Sin imágenes
• Tiene sentido el contenido?
• Es mas difícil de entender el contenido?
• Desapareció contenido relevante?
• Desaparecen controles necesarios?
Simplificar
Atención
@ximemuzza
54. Cuantas más opciones mas
tiempo de evaluación para
tomar una decisión
Hicks Law
Juicio y
Evaluación
Atención
Unfamiliar / Low IQ
Memoria
@ximemuzza
55. Cuantas más opciones mayor
insatisfacción cuando se toma
una decisión
Paradoja de decisiones
Barry Schwartz
Juicio y
Evaluación
Atención
@ximemuzza
61. Permitir al usuario controlar su
ritmo, evitar time-out en
formularios
No patear o finalizar la sesión
forzosamente
Permitir iniciar y pausar
contenido multimedia
Tiempo
Atención
Resolución de
Problemas
Velocidad de
Procc.
@ximemuzza
62. Permitir volver pasos atrás
Ofrecer des-hacer acciones
Editar datos previamente
ingresados
Cancelar acciones
Errores y Recuperación
Resolución de
Problemas
@ximemuzza
68. Interfaz limpia y enfocada,
Minimice opciones y decisiones.
Divida procesos complejos.
Simple
LenguajeMemoria
Resolución de
Problemas
Atención
Velocidad de
Procc
@ximemuzza
69. Incluya formatos alternativos al texto
para la información, ofrezca control
sobre el ritmo y los tiempos
Adaptable
LenguajeMemoria
Resolución de
Problemas
Atención
Velocidad de
Procc
@ximemuzza
70. Use patrones de manera
consistente y sea predecible
Consistente
LenguajeMemoria
Resolución de
Problemas
Atención
Velocidad de
Procc
@ximemuzza
71. Use lenguaje sencillo, claro y
ordenado lógicamente
Leíble
LenguajeMemoria
Resolución de
Problemas
Atención
Velocidad de
Procc
@ximemuzza
72. Sea flexible y permisivo, ayude en la
toma de decisiones, permita y ayude a
resolver errores.
Asistido
LenguajeMemoria
Resolución de
Problemas
Atención
Velocidad de
Procc
@ximemuzza