Interacción Hombre-Máquina

El Factor Humano

Introducción

• En el pasado los diseñadores de sistemas no daban ninguna importancia al elemento humano.

• Sabemos por experiencia que el uso de sistemas es muchas veces difícil, complicado y frustrante.

• Es importante conocer los aspectos humanos de la interacción para mejorar ésta.

Contenido

Modelo de procesamiento El modelo de memoria Los sentidos

Modelo de Procesamiento Para estudiar el papel del ser humano en el

diseño de sistemas interactivos se recurre a la Psicología Cognitiva.

Psicología CognitivaDisciplina científica que se encarga del estudio del sistema de procesamiento de información humano.Se ocupa de los procesos a través de los cuales el individuo obtiene conocimiento del mundo y toma conciencia de su entorno, así como de sus resultados.

(Santamaría, s.f.)

La psicología cognitiva moderna se ha formado bajo la influencia de disciplinas afines, como el tratamiento de la información, la inteligencia artificial y la ciencia del lenguaje.

Modelo de Procesamiento

Los psicólogos cognitivos han acumulado datos empíricos y teorías explicativas sobre las capacidades y limitaciones del sistema cognitivo humano:

• cómo se percibe el mundo que nos rodea,• cómo se almacena y recupera la información, ente otros.

De esta forma es posible conocer si hay cosas que le resultan difíciles de aprender o realizar.

Modelo de Procesamiento – Sicólogos cognitivos

Para entender la relación humano-máquina y aprovecharla, es necesario conocer acerca de la memoria humana y el proceso cognitivo.

Memoria de largo plazo

Memoria de corto plazo

Memoria sensorial

Procesador Perceptual

Procesador cognitivo

Procesador motor

Procesamiento humano de la información

Procesador Humano

Memoria de Largo Plazo

Memoria de Corto Plazo

Memoria

Visual

Memoria

Auditiva

Modelo de Memorial Múltiples

Procesador Cognoscitivo

Procesador Sensorial

Procesador Motor

MODELO DEL PROCESADOR HUMANO

Modelo Procesamiento de InformaciónEntrada

o estímulo

Salida o

respuestaDECODIFICACIÓN

Estado 1

COMPARACIÓN

Estado 2

SELECCIÓN DE

LA RESPUESTA

Estado 3

EJECUCIÓN DE

LA RESPUESTA

Estado 4

El humano establece analogías entre el conocimiento adquirido previamente y el nuevo presentado en la interfaz

APRENDIZAJE POR ANALOGÍA

Actúa como buffer de los estímulos recibidos a través de los sentidos.

Existen tantas memorias sensoriales como sentidos tenemos, y se actualizan constantemente .Las que mejor conocemos actualmente son:

Memoria Icónica, ligada al canal visual.Memoria Ecoica, ligada al canal auditivo.

MEMORIA SENSORIAL

14

La psicología de los objetos cotidianos

Prof. Ciencias Cognitivas (Uni San Diego – California)Prof. Informática (Northwestern University)

Modelo Procesamiento de Información

Atención

Memoria

DECODIFICACIÓN COMPARACIÓNSELECCIÓN DE

LA RESPUESTA

EJECUCIÓN DE

LA RESPUESTA

Foco de atención: habilidad que tiene el individuo de atender un evento desde una gran masa de estímulos que compiten en el ambiente.

Atención

DECODIFICACIÓN COMPARACIÓNSELECCIÓN DE

LA RESPUESTA

EJECUCIÓN DE

LA RESPUESTA

MEMORIA

SENSORIAL

MEMORIA

DE CORTO PLAZO

MEMORIA

DE LARGO PLAZO

MODELO DE MEMORIAS MÚLTIPLES

Modelo Procesamiento de Información

Conjunto de símbolos activos en un momento determinado a los que estamos prestando atención, y que por tanto podemos manipular mediante control voluntario.

Los símbolos con los que se está trabajando se mantienen en ella mientras que los estemos usando y prestando atención.

Ejemplos: Recordar un número a marcar. Realizar una operación aritmética.

Modelo de memoria

Memoria de corto plazo

Características:– Acceso rápido, 70 mseg.– Rápida decaída (se mantiene unos 200 mseg.).– Baja capacidad (7 ± 2).– Capacidad variable según la persona.– Puede mejorarse mediante entrenamiento.

Modelo de memoria

Memoria de corto plazo

EjerciciosRecordar conceptos en orden. Lea una sola vez las siguientes palabras y luego intente recordarlas en el orden correcto:  SOMBRERO - PERRO – LAGO - ALMOHADA – PANTALLA – VÍBORA – SOGA – PRESIDIARIO- LAPICERA- PLATO-

Para recordar perfectamente las 10 palabras del  Test realice este ejercicio: Póngase 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 víbora aparece en la pantalla del cine,  una soga ata a  la víbora, 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.

Solución

EjercicioUsar la memoria  con  inteligencia.

¿Cuántos números 9 hay entre el 1 y el 99?

SoluciónSon 20: 

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

UNA RECETA PARA LA MEMORIAUse esta sigla tan usada en Marketing “AIDA”:

Atienda: Concéntrese en lo que quiere recordar.

Interese a su cerebro: Saque la fotografía mental.

Desee recordar: Haga su película.

Actúe: Esfuércese de inmediato en reconstruir mentalmente lo que creó.

• La memoria a 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.

Memoria de Largo Plazo

Proceso de olvido: Teoría de decaimiento: la información que reside en la MLP

eventualmente se puede perder. Pérdida por inferencia: si adquirimos nueva información, puede

causar la pérdida de la antigua (ej. nuevo número de teléfono o tarjeta de débito).

Los factores emocionales afectan: Recordamos las cosas positivas y hechos importantes (ej.

periódico).

No está claro si realmente olvidamos o bien nos resulta difícil recordar

Memoria de largo plazo

Proceso de recuperación de la información

– Recuerdo: la información es reproducida por la memoria.

– Reconocimiento: la presentación de la información suministra pistas acerca de ella. Es un proceso menos complejo.

Memoria de Largo Plazo

MEMORIA DE CORTO PLAZO

Procesador cognoscitivo

C´2

MEMORIA DE LARGO PLAZO

Se genera nuevo conocimiento

C1;C2:C3C1+Comp1; C2+Comp2;C3+Comp3

3

ConceptoC

C´tienese comporta

comoComp3

DECODIFICACIÓN

MEMORIA SENSORIAL

C se transforma C´

C´

1

COMPARACIÓN

C ´ ? C1C´ ? C2C´ ? C3

4

C3

SELECCIÓN

5

C3+Com3 6

C´+Com3

EJECUCIÓN

7

C´+Comp3C´+Comp38

Aprendizaje por analogía (Nivel

Novato)

Modelo Procesamiento de Información

MEMORIA DE CORTO PLAZO

C´2

ConceptoC

C´tiene

comportamiento

Comp3

DECODIFICACIÓN

MEMORIA SENSORIAL

C se transforma C´

C´

1

C´+Com3

EJECUCIÓN

4

MEMORIA DE LARGO PLAZO

C1+Comp1; C2+Comp2;C3+Comp3

C´+Comp3C´+Comp33

Aprendizaje por analogía (Nivel

Experto)

Modelo Procesamiento de Información

Computador

DispositivosSalida

DispositivosEntrada

Sensores Efectores

Memoriasensorial (MS)

atención

Memoria de Trabajo

Memoria de Largo Plazo

elaboración recuperación

recordatorio rendimiento

Modelo de procesamiento humano

Canales de entrada-salida

Modelo de procesamiento humano

Canales de entrada-salida

Entrada• Percepción a través de

los sentidos:– Vista– Oído– Tacto– Gusto– Olfato

Salida• Acciones a través de los

actuadores (efectores):– extremidades– miembros– dedos– ojos– cabeza– sistema vocal

Los sentidos• Los sentidos constituyen los canales de

comunicación con el exterior (sensores).• Los sentidos con mayor incidencia son la vista y el

oído, y en menor grado el tacto y el olfato.

Los sentidos

Percibir

Definición: Añadir conocimientos (del mundo exterior) por medio de las impresiones que transmiten los sentidos.

Para interaccionar con un computador necesitamos percibir la información que se presenta en la interfaz.

Los sentidos

Percepciones

Las más importantes para la IHM son:– Percepción visual (ojo).– Percepción acústica (oído).– Percepción háptica (tacto).

Los sentidos

Percepción Visual

• La visión es la principal fuente de información.• Proceso de la visión:

– Recepción física del estímulo.– Interpretación del estímulo.

Percepción visual

Componentes

• Color• Brillo• Tamaño y profundidad• Ángulo visual

Color (Percepción visual)

• El ojo percibe la tonalidad (longitud de onda), intensidad y saturación (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 través de los conos, sensibles a diferentes longitudes de onda.

• Existen ciertos fenómenos visuales relacionados con el mecanismo de percepción del color.

Mira fijamente el ojo del pájaro rojo mientras cuentas lentamente hasta 20.

http://www.exploratorium.edu/exhibits/espanol/bird_in_a_cage/index.html

Experimento

Ahora mira inmediatamente un solo punto en la jaula vacía. La imagen débil y fantasmal de un pájaro azul verdoso aparecerá en la jaula.

Haz lo mismo con el pájaro verde. En la jaula aparecerá la figura débil de un pájaro magenta.

20191817161514131211109876543210

Percepción visual

Color

Los pájaros fantasmales se denominan imágenes secundarias, y son imágenes que permanecen después de mirar un objeto.

Los conos sólo son sensibles a algunos colores. Cuando se mira fijamente el pájaro 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 células 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 pájaro 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

Explicación

Percepción visual

Color

Este fenómeno visual tiene importantes consecuencias para la IHM:Debe evitarse la combinación 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 investigación llevada a cabo en Psicología sobre este tema ha permitido disponer hoy de unas guías para la selección del color en las interfaces.

Percepción visual

Color

Recomendaciones generales: Elegir combinaciones de colores compatibles. Evitar las

combinaciones rojo-verde, azul-amarillo, rojo-azul. Usar altos contrastes de color entre la letra y el fondo. Usar azul claro sólo para las áreas de fondo. Usar el blanco para la información periférica.

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 vídeo inverso usar negro, rojo, azul o magenta. Evitar colores muy saturados.

Percepción visual

Color

AMARILLO + AZULAMARILLO + AZUL

AMARILLO + AZUL

El usuario ha alcanzado cierta experticia,

puesto que ejecuta la tarea sin tener conciencia

LA GRAN PRUEBAXXXXX XXXX XXX XXXXXXXX XXXXX

XXXXXXXXX XXX XXXX XXXXXXXXXXXX XXXX XX

.

¿TE AFECTA MI BUENA COMBINACIÓN?

No se debe abusar del color como medio de codificación porque los problemas de visión del color son muy comunes. El 8% de los hombres y el 1% de las mujeres tienen algún

problema de visión del color

Tipo Descripción

Tricrómata Visión cromática normal

Dicromático Protanopa Insensible al rojo

Dicromático Deuterópata Insensible al verde

Tritanopa Insensible al azul y amarillo

Monocrómata Sin visión del color

Percepción visual

Color

Percepción visual

Brillo• Reacción a la cantidad de luz emitida por un objeto

(luminancia).• La agudeza visual mejora con la luminancia, pero

cuando es muy elevada se incrementa el parpadeo.• Debe tenerse en cuenta que el usuario trabaja en un

ambiente luminoso que influye en cómo se ve la información presentada en la interfaz.

Esto es competencia del diseñador del espacio de trabajo (el ergónomo), aunque el diseñador de la interfaz puede adaptar ésta a la situación en la que será utilizada.

Ejemplos: alinear las pantallas en relación correcta con las fuentes de luz, nunca colocar una pantalla contra una pared o un espejo, usar vídeo inverso para minimizar los destellos, etc.

Percepción visual

Profundidad

Un objeto sobrepuesto a otro nos dice que el segundo está más lejos que el primero.

Familiaridad:– Si conocemos un objeto podemos saber la

distancia.

La percepción de la distancia está relacionada con el ángulo visual del objeto.

Si el ángulo visual es mayor el objeto está más cerca.

Percepción visual

Ángulo Visual

El ángulo visual está afectado por el tamaño y la distancia del objeto.

Objetos del mismo tamaño a diferentes distancias tienen ángulos diferentes

Objetos de diferentes tamaños y distancias pueden tener el mismo ángulo

Percepción visual

Ángulo Visual

Percepción visual Capacidad y limitaciones

Capacidad:La habilidad para interpretar la imagen permite resolver ambigüedades por el contexto.

Limitaciones:En algunas ocasiones se pueden producir ilusiones ópticas.

Esta mujer parece estar flotando por encima de la arena. La ilusión ó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 engañado, lo que vemos es una veterinario, detrás de la cabeza del camello

Los píxeles no tienen el mismo peso!

Investigación sobre el movimiento de los ojos (eyetracking)

Qué es el eyetracking?

El eyetracking es una tecnología que permite seguir los movimientos oculares de una persona para inferir qué mira y qué ve.

Eyetracker, un monitor especial que lanza rayos infrarrojos a los ojos de quien lo usa. Estos rayos rebotan en su pupila y vuelven al aparato, permitiendo así calcular con precisión dónde está mirando.

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 página de inicio de la imagen siguiente:

El usuario tardó 90 segundos en hacer clic en "Club familiar", desde donde pudo acceder al catálogo de productos para particulares y encontrar una hipoteca. Para ayudar al análisis de porqué se tardó tanto en hacer esta acción, se pueden usar los resultados obtenidos con el eyetracking.

En el siguiente mapa de calor obtenido con eyetracking se muestran con colores cálidos (rojos) los puntos que el participante vio durante más de un segundo y medio en su visita a la página de inicio. Los colores más fríos (amarillos o verdes) representan zonas que el usuario vio durante menos tiempo.

Según 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 página, por lo que tardó 80 segundos en hacer clic desde que vio el enlace.

http://caigrupoibercaja.caja3.es/

El eyetracking no responde directamente a la cuestión 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 fácilmente otras alternativas (como que no se vio el enlace).

Percepción visual

Percepción 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 están entre 9 y 12 puntos (px).

• La longitud de las líneas debe estar entre 6 y 13 cm.

5 fáciles pasos para app’s legibles

Alineado horizontal:

Cualquier párrafo de texto debería comenzar a una distancia del margen izquierdo de la página situada entre los 300px y los 600px. Ni antes, ni después. El usuario dedica el 69% de su tiempo en mirar hacia la mitad izquierda de la pantalla.

Ancho de párrafo:

Lo suyo es que cualquier párrafo deberá estar formado por líneas de texto de no más de 20 palabras por línea. Esto son alrededor de 500 pixeles de ancho en caso de utilizar un tamaño de fuente de 10-12px. Ciertos autores ajustan mucho más esta cifra. En resumen, las consecuencias de optimizar el ancho de página son un incremento en la legibilidad del texto.

Tamaño de fuente:

Corresponde a la propiedad font-size.

Como norma, es recomendable utilizar un tamaño de fuente igual o superior a los 10px. No obstante, es conveniente emplear tamaños de fuente alrededor de los 14px si la audiencia del sitio web gira más allá de los 40 años.

Tipografía:

Es la propiedad font-family del CSS.

Los tipos de fuente más recomendados son aquellas especialmente diseñadas 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 parámetro fundamental para lograr un texto legible.

No interesan líneas muy juntas que hagan saltar de una a la otra por error. Tampoco líneas muy distanciadas que visualmente parezcan formar parte de párrafos distintos.

Idealmente, es interesante utilizar un interlineado superior al tamaño de fuente.

Es decir, para un tamaño de fuente de 10px es apropiado utilizar un interlineado de, por ejemplo, 12px.

http://www.ganaiviaja.com/las-mejores-fuentes-para-utilizar-en-tu-diseno-web/

http://www.google.com/fonts/

http://www.bestwebfonts.com/ (BestWebFonts, es una aplicación web completamente gratuita, la cual se encarga de proporcionarnos una muy completa colección con las mejores fuentes de Google, que podemos utilizar en cualquier sitio web.

Los sentidos

El oído

Sonido: cambio de presión del aire (vibración).• En IHM, se usa en las interfaces auditivas y

multimodales que combinan el sonido y la imagen para transmitir información.Ejemplo: menús auditivos usados por las compañías telefónicas.

Los sentidos

El tacto (háptica) ¿Por qué preocuparnos por el tacto en IHM?

1. Es un canal sensitivo muy importante en el diseño de sistemas de Realidad Virtual.

2. Resulta muy útil para personas con discapacidades visuales o auditivas.

3. Proporciona una realimentación en tareas como pulsar un botón o una tecla, o arrastrar un objeto por la pantalla.

Los sentidos

El Tacto

El tacto no está localizado, recibimos los estímulos a través de la piel.

Las áreas mas sensibles son los dedos.

Tenemos tres tipos de receptores sensoriales:– Termorreceptores (calor).– Nocirreceptores (intensidad).– Mecanorreceptores (presión).

Los sentidos

El Tacto

Otros aspectos de la percepción háptica son:– La kinestesia o conciencia de la posición del cuerpo y las

extremidades.– El sentido vestibular, que proporciona información acerca de

la orientación, el movimiento y la aceleración.

• Normalmente no somos conscientes de ellos, salvo cuando nuestros receptores sensoriales reciben estímulos inadecuados.

• Son muy importantes en el diseñode sistemas de Realidad Virtual: Si no se tienen en cuenta nos

encontramos con problemas demareos, nausea y desorientación 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.

• Además es importante porque el sentido del olfato está conectado con el sistema encargado de procesar las emociones (‘interfaces emocionales’).

• Aún existen grandes dificultades para su uso en el diseño de interfaces:– Existe una gran variación individual

en la sensibilidad al olor.– La sensibilidad se pierde con el

tiempo de exposición, entre otros.