Interaccin Hombre-Mquina

El Factor Humano

Introduccin
En el pasado los diseadores
de sistemas no daban ninguna
importancia
al
elemento
humano.
Sabemos por experiencia que
el uso de sistemas es muchas
veces difcil, complicado y
frustrante.
Es importante conocer los
aspectos humanos de la
interaccin para mejorar sta.

Contenid
o
Modelo de procesamiento
El modelo de memoria
Los sentidos

Modelo de
Para
estudiar el papel
Procesamiento

del ser
humano en el diseo de sistemas
interactivos
se
recurre
a
la
Psicologa
Cognitiva.
Psicologa
Cognitiva
Disciplina cientfica que se encarga del
estudio del sistema de procesamiento de
informacin humano.
Se ocupa de los procesos a travs de los
cuales el individuo obtiene conocimiento
del mundo y toma conciencia de su
entorno, as como de sus resultados.
(Santamara, s.f.)

Modelo de Procesamiento
La psicologa cognitiva moderna se
ha formado bajo la influencia de
disciplinas
afines,
como
el
tratamiento de la informacin, la
inteligencia artificial y la ciencia del
lenguaje.

Modelo de Procesamiento Siclogos

cognitivos
Los psiclogos cognitivos han acumulado datos
empricos y teoras explicativas sobre las capacidades y
limitaciones del sistema cognitivo humano:
cmo se percibe el mundo que nos rodea,
cmo se almacena y recupera la informacin,
ente otros.
De esta forma es posible conocer si hay cosas que le
resultan difciles de aprender o realizar.

Procesamiento humano de la
informacin
Procesador motor
Memoria sensorial

Memoria de largo plazo

Memoria de corto plazo

Procesador
cognitivo

Procesador
Perceptual
Para entender la relacin humano-mquina y
aprovecharla, es necesario conocer acerca de la
memoria humana y el proceso cognitivo.

Procesador Humano
Memoria de Largo Plazo
Memoria de Corto Plazo
Memoria Memoria
Visual

Modelo de Memorial Mltiples

Auditiva

Procesador Cognoscitivo
Procesador Sensorial
Procesador Motor
MODELO DEL PROCESADOR HUMANO

Modelo Procesamiento de
Informacin
Entrada

o estmulo

DECODIFICACIN

COMPARACIN

Estado 1

Estado 2

SELECCIN DE

EJECUCIN DE

Salida o

LA RESPUESTA

LA RESPUESTA

respuesta

Estado 3

Estado 4

El humano establece analogas entre el

conocimiento adquirido previamente y el
nuevo presentado en la interfaz
APRENDIZAJE POR ANALOGA

MEMORIA SENSORIAL
Acta como buffer de los estmulos recibidos a
travs de los sentidos.
Existen tantas memorias sensoriales como
sentidos tenemos, y se actualizan constantemente .
Las que mejor conocemos actualmente son:
Memoria Icnica, ligada al canal visual.
Memoria Ecoica, ligada al canal auditivo.

Prof.
Ciencias
Cognitivas
(Uni
San
Diego

California)
Prof.
Informtica
(Northwestern
University)

La psicologa de los objetos

cotidianos

14

Modelo Procesamiento de Informacin

Atencin
DECODIFICACIN

COMPARACIN

SELECCIN DE

EJECUCIN DE

LA RESPUESTA

LA RESPUESTA

Memoria
Foco de atencin: habilidad que tiene el individuo de
atender un evento desde una gran masa de estmulos que
compiten en el ambiente.

Modelo Procesamiento de Informacin

Atencin
DECODIFICACIN

COMPARACIN

SELECCIN DE

EJECUCIN DE

LA RESPUESTA

LA RESPUESTA

MEMORIA

MEMORIA

MEMORIA

SENSORIAL

DE CORTO PLAZO

DE LARGO PLAZO

MODELO DE MEMORIAS
MLTIPLES

Modelo de memoria

Memoria de corto
plazo
Conjunto de smbolos activos en un momento
determinado a los que estamos prestando atencin,
y que por tanto podemos manipular mediante control
voluntario.
Los smbolos con los que se est trabajando se
mantienen en ella mientras que los estemos usando
y prestando atencin.
Ejemplos:
Recordar un nmero a marcar.
Realizar una operacin aritmtica.

Modelo de memoria

Memoria de corto
plazo
Caractersticas:
Acceso rpido, 70 mseg.
Rpida decada (se mantiene unos 200
mseg.).
Baja capacidad (7 2).
Capacidad variable segn la persona.
Puede mejorarse mediante entrenamiento.

Ejercicio
s

Recordar conceptos en orden.

Lea una sola vez las siguientes palabras y luego intente
recordarlas en el orden correcto:
SOMBRERO - PERRO LAGO - ALMOHADA
PANTALLA VBORA SOGA PRESIDIARIOLAPICERA- PLATO-

Solucin
Para recordar perfectamente las 10 palabras del Test
realice este ejercicio:
Pngase el sombrero, el sombrero lo tiene puesto el
perro, vea al mismo perro en el lago, la almohada
est en el lago, la almohada est en la pantalla del
cine, la vbora aparece en la pantalla del cine, una
soga ata a la vbora, la misma soga ata al
presidiario, el presidiario toma una lapicera, esa
lapicera est en el plato, usted toma el plato. Ahora
intente recordar las 10 palabras en perfecto orden.

Ejercicio
Usar la memoria con inteligencia.
Cuntos nmeros 9 hay entre el 1 y el 99?

Solucin
Son 20:

9- 19- 29- 39-49- 59- 69- 79- 89-99-90-91-92-9394-95-96-97-98

UNA RECETA PARA LA

MEMORIA
Use esta sigla tan usada en Marketing AIDA:
Atienda: Concntrese en lo que quiere recordar.
Interese a su cerebro: Saque la fotografa mental.
Desee recordar: Haga su pelcula.
Acte: Esfurcese de
mentalmente lo que cre.

inmediato

en

reconstruir

moria de Largo Plazo

La memoria a largo plazo almacena
todo nuestro conocimiento.
Las principales caractersticas son:

Gran capacidad (casi ilimitada).

Acceso ms lento (1/10 s).
Las prdidas ocurren ms lentamente.

emoria de largo plazo

Proceso de olvido:
Teora de decaimiento: la informacin que reside
en la MLP eventualmente se puede perder.
Prdida por inferencia: si adquirimos nueva
informacin, puede causar la prdida de la antigua
(ej. nuevo nmero de telfono o tarjeta de dbito).

Los factores emocionales afectan:

Recordamos las cosas positivas y hechos

importantes (ej. peridico).

No est claro si realmente olvidamos o

bien nos
resulta difcil recordar

moria de Largo Plazo

Proceso de recuperacin de la informacin
Recuerdo: la informacin es reproducida
por la memoria.
Reconocimiento: la presentacin de la
informacin suministra pistas acerca de
ella. Es un proceso menos complejo.

Modelo Procesamiento de
Informacin

Aprendizaje por
analoga (Nivel
Novato)

DECODIFICACIN
Concepto
C

C?
C ?
C ?

C se transforma C

C1
C2
C3

C
MEMORIA
SENSORIAL

SELECCIN

COMPARACIN

C3

C
C1;C2:C3
C3+Com3
C+Comp3
MEMORIA DE CORTO
PLAZO
Procesador cognoscitivo

EJECUCIN
C+Com3

3
6
8

C1+Comp1;
C2+Comp2;
C3+Comp3
C+Comp3
MEMORIA DE LARGO
PLAZO
Se genera nuevo
conocimiento

Ctiene
se comporta
como
Comp3

Modelo Procesamiento de
Informacin

Aprendizaje por
analoga (Nivel
Experto)

EJECUCIN

DECODIFICACIN
Concepto
C

C se transforma C

C+Com3

Ctiene
comportamiento
Comp3

C
C+Comp3

MEMORIA
SENSORIAL

MEMORIA DE CORTO
PLAZO

C1+Comp1;
C2+Comp2;
C3+Comp3
C+Comp3
MEMORIA DE LARGO
PLAZO

Modelo de procesamiento humano

Canales de entrada-salida
Computador
Dispositivos
Salida

Dispositivos
Entrada

Sensores

Efectores

Memoria
sensorial (MS)

recordatorio

rendimiento

atencin

Memoria de Trabajo
recuperacin

elaboracin

Memoria de Largo Plazo

Modelo de procesamiento humano

Canales de entrada-salida
Entrada
Percepcin a travs de
los sentidos:

Vista
Odo
Tacto
Gusto
Olfato

Salida
Acciones a travs de los
actuadores (efectores):

extremidades
miembros
dedos
ojos
cabeza
sistema vocal

Los sentidos
Los sentidos constituyen los canales de comunicacin
con el exterior (sensores).
Los sentidos con mayor incidencia son la vista y el
odo, y en menor grado el tacto y el olfato.

Los sentidos

Percibir
Definicin: Aadir conocimientos (del
mundo exterior) por medio de las
impresiones que transmiten los sentidos.
Para interaccionar con un computador
necesitamos percibir la informacin que se
presenta en la interfaz.

Los sentidos

Percepciones
Las ms importantes para la IHM son:
Percepcin
Percepcin
Percepcin

visual (ojo).
acstica (odo).
hptica (tacto).

Los sentidos

Percepcin Visual
La visin es la principal fuente de informacin.
Proceso de la visin:
Recepcin fsica del estmulo.
Interpretacin del estmulo.

Percepcin visual

Componentes

Color
Brillo
Tamao y profundidad
ngulo visual

Color (Percepcin visual)

El ojo percibe la tonalidad (longitud de onda),
intensidad y saturacin (cantidad de color
blanco) de la luz.
Podemos distinguir unos 7 millones de colores,
pero se identifican muchos menos.
El ojo percibe el color a travs de los conos,
sensibles a diferentes longitudes de onda.
Existen ciertos fenmenos visuales relacionados
con el mecanismo de percepcin del color.

Percepcin visual

Experimento

Color

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Mira fijamente el ojo del pjaro rojo mientras cuentas lentamente hasta 20.
Ahora mira inmediatamente un solo punto en la jaula vaca. La imagen dbil
y fantasmal de un pjaro azul verdoso aparecer en la jaula.
Haz lo mismo con el pjaro verde. En la jaula aparecer la figura dbil de
un pjaro magenta.
http://www.exploratorium.edu/exhibits/espanol/bird_in_a_cage/index.html

Percepcin visual

Color

Explicacin

Los pjaros fantasmales se denominan imgenes secundarias, y son

imgenes que permanecen despus de mirar un objeto.
Los conos slo son sensibles a algunos colores. Cuando se mira fijamente el
pjaro rojo, los conos sensibles al rojo comienzan a cansarse y pierden su
sensibilidad. Cuando se cambia repentinamente la mirada al fondo blanco
de la jaula, se ve el blanco menos rojo en los lugares donde las clulas
sensibles al rojo se han fatigado. La luz blanca menos la luz roja es luz azul
verdoso. Por eso la imagen secundaria es azul verdoso.
Lo mismo sucede cuando mira fijamente el pjaro verde. Esta vez son los
conos sensibles al verde los que se fatigan. Blanco menos luz verde es luz
magenta, de modo que se ve la imagen secundaria de color magenta.
http://www.exploratorium.edu/exhibits/espanol/bird_in_a_cage/index.html

Percepcin visual

Color
Este fenmeno visual tiene
consecuencias para la IHM:

importantes

Debe evitarse la combinacin de colores oponentes

en una pantalla: rojo-verde, amarillo-azul.
Ejemplo: letras azules sobre fondo amarillo. Pueden dejarse
de ver las letras, palabras en rojo sobre fondos azules puede
parecer que vibran, etc.

La investigacin llevada a cabo en Psicologa

sobre este tema ha permitido disponer hoy de
unas guas para la seleccin del color en las
interfaces.

Percepcin visual

Color
Recomendaciones generales:
Elegir combinaciones de colores compatibles. Evitar
combinaciones rojo-verde, azul-amarillo, rojo-azul.
Usar altos contrastes de color entre la letra y el fondo.
Usar azul claro slo para las reas de fondo.
Usar el blanco para la informacin perifrica.

las

Recomendaciones para las pantallas:

La luminosidad disminuye en el orden blanco, amarillo, cyan,
verde, magenta, rojo y azul.
Usar blanco, cian o verde sobre fondos oscuros.
Para vdeo inverso usar negro, rojo, azul o magenta.
Evitar colores muy saturados.

AMARILLO + AZUL
AMARILLO + AZUL
AMARILLO + AZUL

El usuario ha alcanzado
cierta experticia,
puesto que ejecuta la
tarea sin tener conciencia

LA GRAN PRUEBA
XXXXX XXXX XXX XXXXXXXX XXXXX
XXXXXXXXX XXX XXXX XXXXXXX
XXXXX XXXX XX
.
TE AFECTA MI BUENA COMBINACIN?

Percepcin visual

Color
No se debe abusar del color como medio de
codificacin porque los problemas de visin del color
son muy comunes.
El 8% de los hombres y el 1% de las mujeres tienen algn
problema de visin del color
Tipo
Tricrmata

Descripcin
Visin cromtica normal

Dicromtico Protanopa Insensible al rojo

Dicromtico
Deuterpata
Tritanopa
Monocrmata

Insensible al verde
Insensible al azul y
amarillo
Sin visin del color

Percepcin visual

Brillo
Reaccin
a lacompetencia
cantidad de luz del
emitida
por un objeto
Esto es
diseador
del
(luminancia).
espacio de trabajo (el ergnomo), aunque
La
agudeza visual
conpuede
la luminancia,
pero
el diseador
de lamejora
interfaz
adaptar sta
cuando es muy elevada se incrementa el parpadeo.
a la situacin en la que ser utilizada.
Debe
tenerse alinear
en cuenta
que el usuario
trabaja
en un
Ejemplos:
las pantallas
en relacin
correcta
ambiente
que
en cmo
ve la
con lasluminoso
fuentes de
luz,influye
nunca colocar
unasepantalla
informacin
presentada
interfaz.
contra una
pared o en
un laespejo,
usar vdeo inverso
para minimizar los destellos, etc.

Percepcin visual

Profundidad
Un objeto sobrepuesto a otro nos dice que
el segundo est ms lejos que el primero.
Familiaridad:
Si conocemos
distancia.

un

objeto

podemos

saber

la

Percepcin visual

ngulo Visual
La percepcin de la distancia est
relacionada con el ngulo visual del
objeto.
Si el ngulo visual es mayor el objeto
est ms cerca.

Percepcin visual

ngulo Visual
El ngulo visual est afectado por el tamao y la
distancia del objeto.
Objetos del mismo
tamao a
diferentes
distancias tienen
ngulos
diferentes
Objetos de
diferentes tamaos
y distancias
pueden tener el
mismo ngulo

Percepcin visual

Capacidad y limitaciones
Capacidad:
La habilidad para interpretar la imagen permite
resolver ambigedades por el contexto.
Limitaciones:
En algunas ocasiones
ilusiones pticas.

se

pueden

producir

Esta mujer parece estar flotando por encima

de la arena. La ilusin ptica es causada por
la sombra de una bandera.

A primera vista parace que el camello se est

comiendo a esa mujer. Pero, otra vez, el cerebro nos
ha engaado, lo que vemos es una veterinario,
detrs de la cabeza del camello

Los pxeles no tienen el

mismo peso!

Investigacin sobre el movimiento de los ojos

(eyetracking)

Qu es el
eyetracking?
El eyetracking es una tecnologa que permite
seguir los movimientos oculares de una persona
para inferir qu mira y qu ve.
Eyetracker, un monitor
infrarrojos a los ojos de
rebotan en su pupila
permitiendo as calcular
mirando.

especial que lanza rayos

quien lo usa. Estos rayos
y vuelven al aparato,
con precisin dnde est

En un estudio realizado por Usolab, se le pidi a un

participante que buscara un producto para financiar la
compra de una casa en la pgina de inicio de la imagen
siguiente:

El usuario tard 90 segundos en hacer clic en "Club familiar", desde

donde pudo acceder al catlogo de productos para particulares y
encontrar una hipoteca. Para ayudar al anlisis de porqu se tard
tanto en hacer esta accin, se pueden usar los resultados obtenidos
con el eyetracking.

En el siguiente mapa de calor obtenido con eyetracking se muestran con

colores clidos (rojos) los puntos que el participante vio durante ms de un
segundo y medio en su visita a la pgina de inicio. Los colores ms fros
(amarillos o verdes) representan zonas que el usuario vio durante menos
tiempo.

http://caigrupoibercaja.caja3.es/

Segn el mapa de calor, el usuario vio el acceso a "Club Familiar".

Los resultados finales del test indicaron que el participante lo hizo a los
10 segundos de entrar en la pgina, por lo que tard 80 segundos en
hacer clic desde que vio el enlace.

El eyetracking no responde directamente a la

cuestin de si el usuario tard tanto por un problema
de nomenclatura ("club Familiar" no es un nombre
que el usuario comprenda o relacione con su
objetivo) o por un problema visual (el enlace no
parece tal), pero s ayuda a descartar fcilmente
otras alternativas (como que no se vio el enlace).

Percepcin visual

Percepcin del texto

Leemos alrededor de 250 palabras por minuto en
buenas condiciones; la velocidad a la que leemos el
texto es una medida de su legibilidad.
Los mejores tipos de letras estn entre 9 y 12 puntos
(px).
La longitud de las lneas debe estar entre 6 y 13 cm.

5 fciles pasos para apps legibles

Alineado horizontal:
Cualquier prrafo de texto debera comenzar a una distancia del
margen izquierdo de la pgina situada entre los 300px y los
600px. Ni antes, ni despus. El usuario dedica el 69% de su tiempo
en mirar hacia la mitad izquierda de la pantalla.
Ancho de prrafo:
Lo suyo es que cualquier prrafo deber estar formado por lneas
texto de no ms de 20 palabras por lnea. Esto son alrededor
500 pixeles de ancho en caso de utilizar un tamao de fuente
10-12px. Ciertos autores ajustan mucho ms esta cifra.
resumen, las consecuencias de optimizar el ancho de pgina son
incremento en la legibilidad del texto.

de
de
de
En
un

Tamao de fuente:
Corresponde a la propiedad font-size.
Como norma, es recomendable utilizar un tamao de fuente
igual o superior a los 10px. No obstante, es conveniente
emplear tamaos de fuente alrededor de los 14px si la audiencia
del sitio web gira ms all de los 40 aos.
Tipografa:
Es la propiedad font-family del CSS.
Los tipos de fuente ms recomendados son aquellas
especialmente diseadas para ser mostradas en pantalla (y no en
papel). Estas son las Arial, Georgia, Times, Verdana o Courier
entre otras. Ante la duda, Verdana.

Interlineado:
En todo CSS esta es la propiedad line-height.
El interlineado es un parmetro fundamental para lograr un texto legible.
No interesan lneas muy juntas que hagan saltar de una a la otra por error.
Tampoco lneas muy distanciadas que visualmente parezcan formar parte
de prrafos distintos.
Idealmente, es interesante utilizar un interlineado superior al tamao de fuente.
Es decir, para un tamao de fuente de 10px es apropiado utilizar un interlineado
de, por ejemplo, 12px.

http://www.ganaiviaja.com/las-mejores-fuentespara-utilizar-en-tu-diseno-web
/
http://www.google.com/fonts/
http://www.bestwebfonts.com/
(BestWebFonts,
es
una
aplicacin
web
completamente gratuita, la cual se encarga de
proporcionarnos una muy completa coleccin con
las mejores fuentes de Google, que podemos
utilizar en cualquier sitio web.

Los sentidos

El odo
Sonido: cambio de presin del aire (vibracin).
En IHM, se usa en las interfaces auditivas y
multimodales que combinan el sonido y la imagen
para transmitir informacin.
Ejemplo: mens auditivos usados por las compaas
telefnicas.

Los sentidos

El tacto (hptica)
Por qu preocuparnos por el tacto en IHM?
1.
2.

3.

Es un canal sensitivo muy importante en el diseo de sistemas de

Realidad Virtual.
Resulta muy til para personas con discapacidades visuales o
auditivas.

Proporciona una realimentacin en tareas como pulsar un botn

o una tecla, o arrastrar un objeto por la pantalla.

Los sentidos

El Tacto

El tacto no est localizado, recibimos los estmulos

a travs de la piel.
Las reas mas sensibles son los dedos.
Tenemos tres tipos de receptores sensoriales:

Termorreceptores (calor).
Nocirreceptores (intensidad).
Mecanorreceptores (presin).

Los sentidos

El Tacto
Otros aspectos de la percepcin hptica son:
La kinestesia o conciencia de la posicin del cuerpo y las
extremidades.
El sentido vestibular, que proporciona informacin acerca de
la orientacin, el movimiento y la aceleracin.

Normalmente no somos conscientes de ellos, salvo

cuando nuestros receptores sensoriales reciben
estmulos inadecuados.
Son muy importantes en el diseo
de sistemas de Realidad Virtual:
Si no se tienen en cuenta nos
encontramos con problemas de
mareos, nausea y desorientacin espacial

Los sentidos

El Olfato
Ha comenzado a ser explorado en IHM por las
posibilidades que ofrecen los olores para crear
mundos virtuales parecidos a los reales.
Adems es importante porque el sentido del olfato
est conectado con el sistema encargado de procesar
las emociones (interfaces emocionales).
An existen grandes dificultades para su uso en el
diseo de interfaces:
Existe
una
gran
variacin
en la sensibilidad al olor.
La
sensibilidad
se
pierde
tiempo de exposicin, entre otros.

individual
con

el