INTERACCIÓN

HOMBRE MÁQUINA
Ing. Tania Peralta Guaraca, MSc.
El Factor Humano
UNIDAD 2
Objetivos

➢Conocer los tipos de percepciones más relevantes desde el punto de

vista interactivo que tiene la persona

➢Conocer como se ha realizado el proceso de comprensión y los

modelos de memoria

➢Comprender que el modelo de memoria condiciona el diseño de

la interfaz

➢Ver la importancia que tiene la limitación de la memoria de trabajo

Contenidos

➢2.1 Factores humanos

➢2.1.1. Principios psicológicos, modelos mentales y procesamiento
de la información
➢2.1.2. Ergonomía
➢2.1.3. Diversidad funcional
➢2.2 Estilos y dispositivos de interacción
➢2.2.1. Estilos de interacción
➢2.2.2. Dispositivos de interacción
La visión psicológica sobre el
diseño de UX

➢La gente no quiere trabajar o pensar más de lo necesario

➢Las personas tienen limitaciones
➢La gente comete errores
➢ La memoria humana es complicada
➢Las personas son sociales
➢Atención (es la clave para diseñar una interfaz de usuario atractiva)
➢La gente anhela información
➢Procesamiento inconsciente
➢Las personas crean modelos mentales Sistema visual
La visión psicológica
sobre el diseño de
UX
La visión psicológica sobre
el diseño de UX
Un modelo simple de procesamiento

INPUT
percepciones

OUTPUT
Motor/comportamiento
Psicología cognitiva
➢Disciplina científica que estudia el sistema de procesamiento de la
información en la mente humana
➢Cognición: Adquisición, mantenimiento y uso del conocimiento
Psicología cognitiva
Actividades cognitivas de un usuario
Modelo procesamiento humano
Modelo procesamiento humano
➢A muy alto nivel, podemos describir una persona como un procesador
de información del cual se distinguen:

➢Dos partes:
1. El conjunto de memorias y procesadores
2. El conjunto de principios de operación
➢Tres subsistemas con mutua interacción:
1. El sistema perceptivo, tiene sensores y memorias buffer; transforma las entradas en
códigos simbólicos que son almacenados
2. El sistema cognitivo, que recibe los códigos simbólicos del sistema perceptivo,
situándolos en la memoria de trabajo, y utiliza esta, y la memoria a largo plazo para tomar
decisiones
3. El sistema motor, que ejecuta las respuestas
Modelo procesamiento humano
➢Disponemos de
• un procesador perceptivo, Que según las tareas trabajan
• un procesador cognitivo, y secuencialmente, o en paralelo
• un procesador motor
➢Las memorias se describen a partir de:

➢la capacidad de almacenamiento

➢el tiempo de decaída (de un concepto almacenado)
➢el tipo principal de código (visual, físico, ...)
Modelo procesamiento humano
 Sistemas sensoriales
➢En la transmisión de información del ordenador a la persona hemos
de considerar los sistemas sensoriales humanos

Entrada Salida
• Percepción a través de los • Acciones a través de los
sentidos actuadores (efectores)
• Extremidades
• Vista
• Miembros
• Oído
• Dedos
• Tacto
• Ojos
• Gusto
• Cabeza
• Olfato
• Sistema vocal
Los canales de entrada. Sistema visual

➢El conocimiento del mundo lo construimos con la vista, oído, tacto, dolor,
sensación de movimientos corporales

➢La percepción comienza en las células receptoras que son sensibles a uno u
otro tipo de estímulos

➢Las vías sensoriales conectan al receptor periférico con las estructuras

centrales del procesamiento

➢El cerebro no registra el mundo externo simplemente como una fotografía

tridimensional, sino que construye una representación interna
después de analizar sus componentes
Sensación: Los canales de entrada

➢Ver es obtener información a partir de la energía

electromagnética que llega a los ojos
➢De la estructura espacial del mundo que nos rodea y los distintos
aspectos que pueden distinguirse en él

➢La luz es la porción del espectro electromagnético que puede

ser detectado por el sistema visual humano
 El sistema visual y la IPO
➢Sensación
➢Es la captación del estímulo físico y su transformación en impulso
nervioso

➢Percepción
➢Asignación de significado al estímulo que ha entrado en nuestro
sistema cognitivo

➢En el nivel sensorio visual hablaremos de color e iluminación

➢Las personas trabajamos en un ambiente luminoso que influye
en como se ve la información presentada en la interfaz
 El sistema visual
➢Nuestro sistema visual es mucho más sensible a las
diferencias de color y brillo (a los bordes contrastantes) que
a los niveles de brillo absolutos.

They are the same exact shade

of red but the different
backgrounds make the one on
the left appear darker to our
contrast-sensitive visual
system.
 El sistema visual: Limitaciones
➢ Tres factores de presentación afectan nuestra capacidad para
distinguir los colores entre sí:
• Paleness: The paler (less saturated)
two colors are, the harder it is to tell
them apart.

• Color patch size: The smaller or

thinner objects are, the harder it is to
distinguish their colors.
• Text is often thin, so the exact color of
text is often hard to determine.

• Separation: The more separated

color patches are, the more difficult it
is to distinguish their colors,
especially if the separation is great
enough to require eye motion
between patches.
El sistema visual. Limitations.
➢Color-blindness ≠ inability to see colors.
➢One or more of the color subtraction channels don’t function
normally, making it difficult to distinguish certain pairs
of colors
➢The most common type of
colorblindness is red/green

➢Others:
➢ dark red from black
➢ blue from purple
➢ light green from white
El sistema visual. Factores externos.

➢Factores externos que influyen en la supresión para distinguir

colores:
➢Variación entre pantallas de color
➢Pantallas en escala de grises ángulo de visualización
➢ Iluminación ambiental

➢Estos factores externos generalmente están fuera del control del diseñador
de software

➢PERO los diseñadores deben tener en cuenta y seguir algunas

recomendaciones (ver siguiente diapositiva).
El sistema visual. Recomendaciones (directrices)

➢ Distinguir los colores por saturación y brillo,

así como por tono

➢ Usa colores distintivos

➢ Evite los pares de colores que las personas

daltónicas no pueden distinguir

➢ Usa el color de forma redundante con otras

señales

➢ Color + un símbolo mejor!!

➢ Separar los colores fuertes del oponente Yellow over dark-blue Pale combination
White over black Dark over dark
➢ Usar colores claros para la información Black over orange Ren over green
periférica
El sistema visual. Recomendations
(guidelines). Example
NO
Mala
combinación de
colores (texto
contra fondo)
empeorada por el
tamaño del texto.

SI
El sistema visual. Recomendaciones
(directrices). Ejemplo de Er ror
 El sistema visual. Inter pretación de los
colores

➢¿Qué colores vienen a la mente cuando

➢piensas en ellos?
➢un mensaje de éxito?

De hecho, pensé que cometí un error de

alguna manera (sin leer el mensaje, mi
mal) y luego volví y repetí la tarea antes
de darme cuenta de que me estaban
diciendo que había completado la tarea
con éxito. En 'rojo advertencia'.
El sistema visual. Inter pretación de los
colores

Twitter utiliza una gama de colores para

comunicar diferentes significados con
respecto a las contraseñas, comenzando con
un color rojizo y progresando al verde para
mostrar diferentes niveles de seguridad para
sus contraseñas. Forma realmente simple y
visual de comunicar su mensaje.

El Factor Humano - GEInformàtica, IPO 28 / 110

 http://www.interaction-
design.org/members/imagelibrary/zoom.html?g=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L
2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
 El sistema visual. Fóvea vs periferia

➢La resolución espacial del campo visual humano cae

mucho desde el centro hasta los bordes

➢Especial consideración a la hora de localizar

mensajes de retroalimentación en las interfaces
➢Por ejemplo, mensajes de error
El sistema visual. Fóvea vs Periferia


✓
 El sistema visual. Fóvea vs periferia
➢Recomendaciones para hacer visible el mensaje

➢Póngalo donde los usuarios están buscando

➢ Cuando las personas hacen clic en un botón o enlace, los diseñadores pueden
asumir que los usuarios lo miran directamente (al menos por unos momentos
después).
➢ Utilice esta previsibilidad para colocar los mensajes de error cerca de donde
esperan que los usuarios busquen
➢Marcar el error
➢Usar un símbolo de error

➢Reservar color rojo para errores

➢ En nuestra sociedad, el rojo connota alerta, peligro, problema, error, ...
➢ CUIDADO: Los chinos consideran que el rojo es un color auspicioso o positivo !!!
 El sistema visual. Fovea vs peripher y

➢MÉTODOS MÁS FUERTES para hacer visible el mensaje

➢Usar mensaje emergente en el cuadro de diálogo de error

➢Usar sonido
➢ Cuando una computadora emite un pitido, le dice a su usuario que ha sucedido
algo que requiere atención.

➢Use mensajes flahs o parpadeantes brevemente cuando quieran

asegurarse de que los usuarios los vean
Use all of these “heavy artillery” methods
sparingly, only for critical messages
Modelo procesamiento humano

El Factor Humano - GEInformàtica, IPO 34 / 110

 Memoria sensorial

➢ La información llega a nuestros sentidos de una forma continua y muy rápida

➢ Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para

realizar su función y puede ocurrir que la pierdan antes de almacenarla

➢ Por esta razón, los canales sensoriales tienen asociados memorias donde la
información se almacena por cortos períodos de tiempo (milésimas de segundo)

➢ La función de estas memorias es retener la información para que pueda ser transferida a
la Memoria de Trabajo antes de que desaparezca
 Memoria sensorial
➢ Actúa como buffer de los estímulos recibidos a través de los sentidos

➢ Existe una memoria para cada canal, y se actualizan constantemente

➢ La información se almacena durante periodos muy cortos

➢ Este almacenamiento nos permite predecir la procedencia del sonido (se percibe por cada oído con
un cierto desfase), o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el
estímulo).

➢ Existen tantas Memorias sensoriales como sentidos tenemos.

➢ Sin embargo, las que mejor conocemos actualmente son:

➢ Memoria Icónica, ligada al canal visual
➢ Memoria Ecoica, ligada al canal auditivo
 Memoria sensorial. Almacenes
• Icónico:
• Recibe la información visual
• La información que se recibe es de carácter perceptual y no categorial
• Permite mantener 9 elementos durante aprox. 250 mseg
• Se transfieren los elementos a los que el usuario preste atención

• Ecoico:
• Almacena los estímulos auditivos
• Almacenamiento de
• Sonidos individuales durante 250 mseg
• Palabras con significado durante 2 o más segundos
Modelo procesamiento humano

El Factor Humano - GEInformàtica, IPO 38 / 110

 Memoria de Trabajo (MT). Memoria a
cor to plazo (STM)
➢La memoria a corto plazo no es una reserva, no es un lugar donde
los recuerdos y las percepciones vayan a ser trabajados.
➢No es un repositorio temporal de información recién traída del
sistema sensorial o recuperada de la memoria a largo plazo.
➢En cambio, la memoria a corto plazo es una combinación de
fenómenos que surgen de la percepción y la atención.
➢Cada uno de nuestros sentidos perceptivos tiene su propia
"memoria" a corto plazo muy breve que es el resultado de la
actividad neuronal residual después de un estímulo perceptivo.
 Memoria de Trabajo (MT) (Memoria
Operativa). Shor t-Term Memor y (STM)
➢STM es igual al foco de nuestra atención. Lo que sea que esté en ese
enfoque es de lo que somos conscientes en cualquier momento.
➢Ahora mismo eres consciente de las últimas palabras e ideas que has leído,
pero probablemente no del color de la pared frente a ti.
➢Pero ahora que he cambiado tu atención, eres consciente del color de la
pared y es posible que hayas olvidado algunas de las ideas que leíste en la
página anterior.
➢Las principales características de STM son su baja capacidad y
volatilidad
 Memoria de Trabajo (MT) (Memoria
Operativa). Shor t-Term Memor y (STM)
➢Diseño de un menú (web, teléfono, ...):
➢ ¿Cuántas opciones debe tener?
➢ ¿Unos pocos? ... Pero, ¿cuántas opciones son "pocas"?

• The magical number 7±2, Miller

• Tiempo de acceso: 70 mseg
• Tiempo en la memoria: 20 seg

• BUT: People can only remember about 3-4 items at a

time. The "7 plus or minus 2" rule is an urban
legend. Research shows the real number is 3-4.
from http://uxmag.com/articles/the-psychologists-view-of-ux-design?goback=%2Egde_72842_member_213335291
 Memoria de Trabajo (MT) (Memoria
Operativa). Shor t-Term Memor y (STM)
➢ La carga de información en STM y la
probabilidad de un fallo en la
recuperación de información
almacenada en ella dependen de las
demandas de almacenamiento y del
procesamiento de las tareas.

➢ Los menús profundos y estrechos

demandan más capacidad de
procesamiento.
➢ En ellos, una opción en el nivel superior
de la estructura de menús está poco
relacionada con la descripción de la
tarea, generando mayor demanda de
procesamiento.
➢ El usuario necesita recorrer un
mayor camino para encontrar la
opción que necesita.
 Memoria de Trabajo (MT) (Memoria
Operativa). Shor t-Term Memor y (STM)
• En términos de almacenamiento y procesamiento, en la
interacción con los menús telefónicos se generan grandes
demandas de STM por tres razones:
1. E El usuario debe monitorizar el estado de un
ambiente estimular en constante cambio (la
presentación de las opciones de cada menú). El
usuario debe notar los cambios en ese ambiente
porque eso le permite la evaluación de las
alternativas para la elección de las siguientes
opciones y porque esos cambios le dan un feedback
sobre la eficacia de las opciones ya elegidas.
2.El ritmo de presentación de las opciones es marcado por la interfaz y
no por él. Este ritmo genera una presión temporal que incrementa las
demandas de procesamiento en MT.
3.No existen ayudas externas como ocurre en los menús visuales.
 Memoria de Trabajo (MT) (Memoria
Operativa). Shor t-Term Memor y (STM)
➢Implicaciones del DISEÑO DE LA UI
➢La capacidad y la volatilidad de la memoria a corto plazo
tienen muchas implicaciones para el diseño de sistemas
informáticos interactivos.
➢La UI debe ayudar a las personas a recordar
información esencial de un momento a otro.
➢No exija que las personas recuerden el estado del
sistema o lo que han hecho, porque su atención se
centra en su objetivo principal y el progreso hacia él.
There are two things that every designed screen must do well: describe the
Ejercicio: buscar ejemplos
de diseño que favorezcan current step and describe the next step. It’s as simple…and hard…as that.
o dificulten la STM http://bokardo.com/archives/designing-for-the-next-step
POBLACIÓ 1

POBLACIÓ 2
Modelo procesamiento humano
 Memoria de Largo Plazo (MLP).
Long-Term Memor y (LTM)
➢En realidad es un ALMACÉN DE MEMORIA
➢la capacidad de la memoria humana a largo plazo parece casi ilimitada
➢Debilidades:
➢propenso a errores,
➢impresionista (ponderado por
➢ emociones),
➢libre asociativo,
➢idiosincrásico (muy personal),
➢alterable retroactivamente,
➢fácilmente sesgado por una variedad de
➢ factores en el momento de la grabación
➢ o de recuperación.
Las pruebas son más fáciles:
➢ ¿Cuál era su número de teléfono
anterior (o identificación del
automóvil)?
➢ ¿Cómo se llamaba tu maestra de
primer grado? ¿Segundo grado?
¿Tercer grado? ...
➢ ¿Qué sitio web se presentó
anteriormente ese programa...?
➢ Un examen,
➢ .....
 Memoria de Largo Plazo (MLP).
Long-Term Memor y (LTM)
➢The main thing that the characteristics of long-term memory
imply is that people need tools to augment it.
➢Humankind has a need for technologies that augment memory
➢software designers should try to provide software that fulfills
that need.
➢designers should avoid developing systems that burden
longterm memory
➢Familiar paths (patterns):
➢well-learned routes can be done fairly automatically and does not
consume attention and short-term memory.
➢They are stored in LTM

El Factor Humano - GEInformàtica, IPO 48 / 110

 Memoria de Largo Plazo (MLP).
Long-Term Memor y (LTM)

This kind of registration

burdens long-term
memory: users may have
no unique, memorable
answer for any of the
questions
 Memoria de Largo Plazo (MLP).
Long-Term Memor y (LTM)
➢UI DESIGN implications
➢Recognition is easy; Recall is hard
➢Recognition is essentially perception + LTM working in concert.
➢ If a perception comes in that is similar to an earlier one and the context is close enough, it
easily stimulates a similar pattern of neural activity, resulting in a sense of
recognition.
➢Recall is LTM reactivating (old) neural patterns without immediate similar
perceptual input. Much harder than reactivating a neural pattern with the same
or similar perceptions.
➢ Our brain did not evolve to recall facts ➔ humans develop methods and technologies to
help them remember facts and procedures
➢ Ex.: a sheet of paper or a power point presentation usually is a recall resource
➢The relative ease with which we can recognize things rather than recall
them is the basis of the GUI
➢ [Johnson et al., 1989, The xerox star: A retrospective. IEEE Computer]
 Memoria de Largo Plazo (MLP).
Long-Term Memor y (LTM)
UI DESIGN implications
➢Recognition vs Recall, golden rules:
See & choose
1. See and choose is easier than recall and type
See & choose

Remember & type C> copy doc1 doc2

C> remove fileA
 Memoria de Largo Plazo (MLP).
Long-Term Memor y (LTM)
UI DESIGN implications
• Recognition vs Recall, golden rules:
2. Use pictures where possible to convey function

El Factor Humano - GEInformàtica, IPO 52 / 110

 Memoria de Largo Plazo (MLP).
Long-Term Memor y (LTM)
➢La memoria de largo plazo almacena todo nuestro
conocimiento

➢Las principales características son:

➢Gran capacidad (casi ilimitada)
➢Acceso más lento (1/10 s)
➢Las pérdidas ocurren más lentamente

➢Tipos:
➢Procedimental
➢Declarativa
 Memoria de Largo Plazo (MLP).
Long-Term Memor y (LTM)
➢Why
➢most smart phones make a shutter sound when you close a camera to
take a picture?
➢when you read a book on a tablet seems that "turning the pages"?
➢ ➔link to “the past”
However, increasingly, some of the objects that
serve as reference are disappearing from
memory of users.
The younger generation of iPad users,
• will there ever be operated analog clocks,
calendars, notebooks paper or yellow pages?
• In the near future, how many of them have
passed the pages of a real book?
 Conclusiones
➢La persona percibe información a través de los sentidos
➢Vista, oído, tacto, ...
➢Guarda, manipula y utiliza información
➢Reacciona a la información recibida

➢Una comprensión de les capacidades y limitaciones de las

personas nos ayudará en el diseño de las interfaces de los
sistemas interactivos
Lectura
recomendada
10 things every designer should know about people
http://www.uxforthemasses.com/10-things-every-designer-should-
know-about-people
 Bibliograf ía
• Norman, D. A. (2002). The Design of Everyday Things. Basic Books.
• Anderson, J.R. (1995). Cognitive Psychology and its implications. NY.
• Card, S.K., Moran, T.P. y Newell, A. (1983). The Psychology of Human-
Computer Interaction. Lawrence Erlbaum Associates.
• Cañas, J.J. (2004). Personas y Máquinas. El diseño de su interacción
desde la ergonomía cognitiva.
• Miller, G.A. (1956). The magical number seven plus or minus two:
Some limits on our capacity for processing information. Psychological
Review, 63, 81-97.

Designing with the Mind in 100 Things Every Designer

Mind: Simple Guide to Needs to Know About People
Understanding User Interface
Design Rules Susan Weinschenk
New Riders (2011)
Jeff Johnson
Morgan Kaufmann (2010)

El Factor Humano - GEInformàtica, IPO 56 / 110