2. El Factor Humano

EL FACTOR HUMANO
Grau en Enginyeria Informàtica
Interacció Persona-Ordinador
Toni Granollers
El Curso de Interacción Persona-Ordenador ha sido realizado
por Toni Granollers bajo la licencia Creative Commons
Reconocimiento-NoComercial 4.0 Internacional License.

Presentación
• En el pasado los diseñadores de sistemas no daban
ninguna importancia al elemento humano
• Sabemos por experiencia que el uso de sistemas son
muchas veces difíciles, complicados y frustrantes
• Es importante conocer los aspectos humanos
de la interacción para mejorarla
El Factor Humano - GEInformàtica, IPO 2 / 110

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

The Psychologist’s View of UX Design
1. People Don't Want to Work or Think More Than They
Have To
2. People Have Limitations
3. People Make Mistakes
4. Human Memory Is Complicated
5. People are Social
6. Attention (is a key to designing an engaging UI)
7. People Crave Information
8. Unconscious Processing
9. People Create Mental Models
10. Visual System
http://uxmag.com/articles/the-
psychologists-view-of-ux-
design?goback=%2Egde_72842_member_
213335291

http://unbounce.com/online-marketing/32-bullseye-ux-posts-to-hit-your-conversion-targets/

Un modelo simple del procesamiento de
información
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
repetición

Actividades cognitivas de un usuario

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
• Disponemos de
• un procesador perceptivo,
• un procesador cognitivo, y
• 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, ...)
Que según las tareas trabajan
secuencialmente, o en paralelo

Sistemas sensoriales
• En la transmisión de información del ordenador a la
persona hemos de considerar los sistemas
sensoriales humanos
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

Sensación: Los canales de entrada
• 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

Los canales de entrada. Sistema visual
• 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
• Our visual system is much more sensitive to
differences in color and brightness (to contrasting edges)
than to absolute brightness levels
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. Limitations
• Three presentation factors affect our ability to distinguish
colors from each other:
• 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.

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
http://www.dasplankton.de/ContrastA

El sistema visual. External factors.
• External factors that influence the abolity to distinguish
colors:
• Variation among color displays
• Grayscale displays
• Display angle
• Ambient illumination
• These external factors are usually out of the software
designer’s control.
• BUT designers should keep in mind and follow some
recommendations (see next slide).

El sistema visual. Recomendations
(guidelines)
• Distinguish colors by
saturation and brightness as
well as hue
• Use distinctive colors
• Avoid color pairs that color-
blind people cannot
distinguish
• Use color redundantly with
other cues
• Color + a symbol better !!
• Separate strong opponent
colors
• Use light colors for the
peripheral information
Pale combination
Dark over dark
Ren over green
Yellow over dark-blue
White over black
Black over orange

(guidelines). Example
NO
Bad color
combination
(text against
background)
worsened by
the size of
text.
SI

(guidelines). BAD Example

El sistema visual. Interpretation of colours
• What colours come to mind when you think of
• a Success message?
• doing something wrong?
I actually thought I made
an error somehow (without
reading the message – my
bad) then went back and
repeated the task before I
realized I was being told I
had successfully completed
the task. In ‘warning red‘.
http://spyrestudios.com/the-user-experience-and-psychology-of-colour

El sistema visual. Interpretation of colours
Twitter uses a range of colours
to communicate different
meanings with regards to
passwords, starting with a red-
ish colour, and progressing to
green to show different levels
of security for your passwords.
Really simple, visual way to
communicate their message.

http://www.interaction-
design.org/members/imagelibrary/zoom.html?g=L21lbWJlcnMvaW1hZ2VsaWJ
yYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn

El sistema visual. Fovea vs periphery
• The spatial resolution of the human visual field
drops greatly from the center to the edges
• Special consideration when locating feedback
messages in the interfaces
• Ex. Error messages




• Recomendations for making message visible
• Put it where users are looking
• When people click a button or link, designers can
assume users to be looking directly at it (at least for a
few moments afterward).
• Use this predictability to position error messages
near where they expect users to be looking
• Mark the error
• Use an error symbol
• Reserve red color for errors
• In our society, red connotes alert, danger, problem, error, ...
• CARE: Chinese consider red is a auspicious or positive color !!!

• STRONGER METHODS for making message visible
• Use pop-up message in error dialog box
• Use sound
• When a computer beeps, that tells its user something has happened
that requires attention
• Use wiggling or flashing messages briefly when they want to
ensure that users see them
Use all of these “heavy artillery”
methods sparingly, only for critical
messages

Sistema auditivo
• La audición es crucial para la comunicación humana
• Núcleo de interacciones sociales y transmisión del
conocimiento
• Existen menús auditivos
• IPO
• Estudiar las interfaces auditivas y las multimodales

ARA, 23-3-14
http://www.ara.cat/premium/su
plements/emprenem/Cotxes-
internet-matrimoni-
dificil_0_1106889316.html

S.O. SYNC : Microsoft + Ford
S.O. CarPlay: Apple + Volvo
S.O. Android Auto: Google + multimarca
Use voice commands, steering wheel buttons or
touch screen.
http://mashable.com/2015/03/20/googles-android-auto

El tacto
• ¿Por qué nos hemos de preocupar?
• Vital en dispositivos TÁCTILES (cómo los móviles)
• Es un canal sensitivo importantísimo en el diseño de sistemas de realidad virtual
• El usuario explora mundos virtuales con las manos
• Clases de receptores
• La piel es nuestro sistema sensorial más grande
• Termoreceptores: Temperatura
• Nocireceptores: Estímulos dolorosos
• Mecanoreceptores: Presión
• Sentidos que detectan acciones del cuerpo
• El Sentido cinescético
• Proporciona información sobre lo que ocurre en la superficie y el interior del cuerpo;
• Incluye sensaciones que provienen de la posición y el movimiento de las partes corporales
• Es un sentido somático (articulaciones y huesos)
• El sentido vestibular
• Proporciona información acerca de la orientación, el movimiento, la aceleración
• Funciones
• Equilibrio
• Mantenimiento de la cabeza en posición erguida
• Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza

Dolor
• Dos componentes importantes
• Componente sensorial
• Componente emocional
• Umbral del dolor
• La menor intensidad de estimulación a la cual percibimos dolor
• Tiene un papel constructivo

Temperatura
• Es posible identificar puntos separados para el frío y el calor en
nuestra piel
• Los umbrales de temperatura están influidos por factores como la
parte del cuerpo, la cantidad de piel expuesta y la velocidad de
cambio de la temperatura
• Con la exposición repetida se produce una adaptación térmica en
la que disminuye la intensidad percibida
• Las personas no localizan bien la temperatura ni la miden con
precisión

El Olfato
• Realidad virtual
• Posibilidad que ofrecen los olores
para crear mundos virtuales
parecidos a los reales
• Interfaces emocionales
• Tiene conexiones nerviosas
directas con el sistema límbico, el
encargado de procesar las
emociones
• Adaptación
• Si los receptores son expuestos
durante mucho tiempo a un mismo
olor pierden selectivamente la
sensibilidad a ese olor
• Gran variación individual
• En la sensibilidad al olor, lo que
hace que sea difícil diseñar
interfaces olfativas para que sean
usadas universalmente
http://www.google.com/nose
http://www.micro-
scent.net/index.html
Olfactory Interfaces
https://augmentedbody.wordpress.com/2010/11/0
5/olfactory-interfaces

http://sensoree.com/smell-interfaces
Human Olfactory
Displays and Interfaces:
Odor Sensing and
Presentation
Takamichi Nakamoto
Tokyo Institute of
Technology (Japan)
https://gigaom.com/2013/04/13/how-technology-is-
slowly-developing-its-sense-of-smell

Perception
• Our perception of the world around us is not a true
depiction of what is actually there. We perceive, to a large
extent, what we expect to perceive.
• Our expectations —and therefore our perceptions— are
biased by three factors:
• the past: our experience
• the present: the current context
• the future: our goals

Perception
• (from previous examples) When
your perceptual system has
been primed to see building
shapes, you see building
shapes, and the white areas
between the buildings barely
register in your perception.
When your perceptual system
has been primed to see text,
you see text, and the black
areas between the letters barely
register.
• BUT, experience can also bias
other types of perception,
such as sentence
comprehension Multipage dialog box
The “Next” button is perceived to be in a
consistent location, even when it isn’t
Biased by the past
our experience

Perception

• Users of computer software and Web sites often click buttons or
links without looking carefully at them.
• Their perception of the display is based more on what their past
experience leads them to expect than on what is actually on the
screen.
• This sometimes confounds software designers, who expect users to
see what is on the screen. But that isn’t how perception works
• Ex: previous “Next” & “Back” buttons … many people would not immediately
notice the switch on the last “page”.
• Even after unintentionally going backward a few times, they might continue to
perceive the buttons in their standard locations.
• This is why “place controls consistently” is a common user interface design
guideline.
• Experience tunes us to look for expected features in expected
locations
Biased by the past: our experience

Perception
• Text Links
• While blue is still the safest link color,
other colors work just as well as long as
the links stand out clearly from the body
text. If you don’t have a particular
reason to prefer another color, we
still recommend blue as the safest
choice.
…..
• The position of links can help you
determine whether or not underlining is
necessary.
• Static items should not have the
same color as hyperlinks.
• Don’t use blue text (or underline text)
for nonclickable items.
• Apply the same treatment consistently
throughout your site.
The miscues on this page create confusion. The blue
headings are not clickable. The images are clickable,
but they look like static images. The instructions at
the top of the page tell you what to click on —a sure
sign of design fail.
Beyond Blue Links: Making Clickable Elements
Recognizable, by Hoa Loranger on March 8, 2015
http://goo.gl/79Y4E0

Perception
• PERCEPTION BIASED BY EXPERIENCE
• Imagine that you own a large insurance company. You are meeting
with a real estate manager, discussing plans for a new campus of
company buildings.
• The campus consists of a row of five buildings, the last two with
T-shaped courtyards providing light for the cafeteria and fitness
center.
• If the real estate manager showed you the map shown next figure,
you would see five black shapes representing the buildings
Biased by the present: the current context

Perception
• PERCEPTION BIASED BY EXPERIENCE
• Now imagine that you are meeting with an advertising
manager.
• You are discussing a new billboard ad to be placed in
certain markets around the country.
• The advertising manager shows you the same image, but in
this scenario the image is a sketch of the ad, consisting of a
single word.
• In this scenario, you see a word, clearly and unambiguously

Visual Perception
• Visual perception —reading in particular— is not strictly a
bottom-up process. It includes top-down influences too
• bottom-up process: combining basic features such as edges, lines, angles,
curves, and patterns into figures and ultimately into meaningful objects
• Example: the word in which a character appears may affect how we
identify the character

Visual Perception
• Our overall comprehension of a sentence or of a
paragraph can even influence what words we see in it
• Example: the same letter sequence can be read as different words
depending on the meaning of the surrounding paragraph
Fold napkins. Polish silverware. Wash dishes.
French napkins. Polish silverware. German dishes.

Visual Perception

Perception
• The biasing of perception by the surrounding context
works between different senses too.
• Perceptions in any of our five senses may affect
simultaneous perceptions in any of our other senses.
• For example:
• What we see can be biased by what we are hearing, and vice versa
• What we feel with our tactile sense can be biased by what we are
hearing, seeing, or smelling

Perception
• PERCEPTION BIASED BY GOALS
• In addition to being biased by our past
experience and the present context, our
perception is influenced by our goals and
plans for the future
• our goals filter our perceptions
• For example, when navigating through software or a
Web site, seeking information or a specific function,
people don’t read carefully. They scan screens
quickly and superficially for items that seem
related to their goal. They don’t simply ignore items
unrelated to their goals; they often don’t even
notice them
Biased by the future: our goals

Perception
Excercise: look in next image for a scisors
Now, did you spot the scissors?
And, can you say whether there is a
screwdriver in the toolbox too?

Perception
• This filtering of perception by our goals is
particularly true for adults, who tend to be
more focused on goals than children are.
• Children are more stimulus driven: their
perception is less filtered by their goals, then:
• Children are more distractible than adults, but
• it also makes them less biased as observers

Perception
• Perceptual filtering can also be seen in how people
navigate Web sites
Enhorabona!! La teva entrada a
la web serà recompensada amb
un premi de 100€.
Passa per secretaria de direcció
per recollir-lo.
Look for the
departments
structure of EPS
Have you seen that
you won 100€ ??
NO?
Because it was not
related to your goal !!

Perception
• What is the mechanism by which our current goals bias
our perception? There are two:
• Influencing where we look.
• Perception is active, not passive.
• We constantly move our eyes, ears, hands, and so on.
• We more or less ignore anything unrelated to our goal.
• Sensitizing our perceptual system to certain features.
• When we are looking for something, our brain can prime our perception
to be especially sensitive to features of what we are looking for.

Perception. DESIGN IMPLICATIONS
1. Avoid ambiguity
• Avoid ambiguous information displays
• Test your design to verify that all users interpret the display in the
same way
• Where ambiguity is unavoidable
• rely on standards or conventions to resolve it, or
• prime users to resolve the ambiguity in the intended way
2. Be consistent
• Place information and controls in consistent locations.
• Controls and data displays that serve the same function on different pages
should be placed in the same position on each page on which they appear.
• They should also have the same color, text fonts, shading, and so on.
3. Understand the goals
• Users come to a system with goals they want to achieve.
• Designers should understand those goals.
User
Centred
Design

Gestalt Principles.
Human Vision is OPTIMIZED to See Structure
• Human vision is holistic:
• The visual system automatically imposes structure on visual input
and is wired to perceive whole shapes, figures, and objects rather
than disconnected edges, lines and areas.
Gestalt principles of visual perception
http://www.scholarpedia.org/article/Gestalt_principles
http://en.wikipedia.org/wiki/Gestalt_psychology
http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
• Today’s theories of visual perception tend to be based heavily on
the neurophysiology of the eyes, optic nerve, and brain
• BUT, Gestalt principles are still valid
• at least as a framework for describing visual perception explanations
• Also provides useful basis for guidelines for graphic and UI design

• Similarity — Similar objects are often perceived as a group.
• Continuation — Continuation occurs when the human eyes
follow the direction from one object to another, perceiving
separate objects as one.
• Closure — When gaps appear between shapes, people tend
to mentally close those gaps and form a perception of a whole
object.
• Proximity — Objects placed close together are often
perceived as a group.
• Figure and Ground — Different shapes that are formed by the
foreground (figure) and background (ground).
http://yusylvia.wordp
ress.com/tag/gestalt

Gestalt Principles.
• Proximity
Items that are closer appear
grouped. Left: rows, Right: columns
Distribution List Membership dialog box,
list buttons are in a group box, separate
from the window-control buttons

Gestalt Principles.
• Proximity
poorly spaced radiobuttons look grouped in
vertical columns

Gestalt Principles.
• Similarity
Items appear grouped if
they look more similar to
each other than to other
objects
Mac OS Page Setup dialog box:
The Similarity and Proximity principles
are used to group the
Orientation settings.

Gestalt Principles.
• Similarity
Online form at Elsevier.com:
- Similarity makes the text fields
appear grouped
- The four menus, in addition to
being data fields, help separate
the text field groups.
- By contrast, the labels are too
far from their fields to seem
connected to them.

Gestalt Principles.
• Continuity
• visual perception is biased to perceive continuous forms rather than
disconnected segments
We see a slider as a single slot with a handle
somewhere on it, not as two slots separated by
a handle.
(A) Mac OS, (B) ComponentOne

Gestalt Principles.
• Clousure
• related to Continuity
• our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces

Gestalt Principles.
• Figure/Ground
• human mind separates the visual field into the figure (the
foreground) and ground (the background) and it is influenced by
characteristics of the scene
In UI design, this principle is often used to
place an impression-inducing background
“behind” the primary displayed content
It is also often used to pop up information
over other content. Content that was
formerly the figure —the focus of the users’
attention— temporarily becomes the
background for new information, which
appears briefly as the new.

Gestalt Principles.
Human Vision is OPTIMIZED to See Structure. Figure/Ground

More Gestalt Principles
• Simetry and order Symmetry gives us a feeling of solidity and
order, which we tend to seek. It’s our nature to
impose order on chaos.
The human visual system tries to resolve complex scenes into combinations of
simple, symmetrical shapes

More Gestalt Principles
• previous Gestalt principles
concerned perception of static
(un-moving) figures and
objects.
• Common Fate concerns
moving objects.
• It is related to the Proximity
and Similarity principles:
Like them it affects whether
we perceive objects as
grouped.
• Objects that move together
are perceived as grouped or
related.

Gestalt Principles.
• Of course, in real-world visual scenes, the Gestalt
principles work in concert, not in isolation
• Recommendation:
• after designing a UI, try to view it with each of the Gestalt principles
in mind to see if the design suggests any relationships between
elements that you do not intend

Perceiving Structure
• Perceiving structure in our environment helps us make
sense of objects and events quickly
This website buries the important information
in repetitive prose.
New version, page with repetition eliminated
and better visual structure
Structured presentation of airline reservation
information is easier to scan and understand

• Structure also enhances people’s ability to scan long
numbers
• Segmenting data fields can provide useful visual structure even
when the data to be entered is not, strictly speaking, a number
Easy: (415) 123-4567
Hard: 4151234567
Easy: 1234 5678 9012 3456
Hard: 1234567890123456
Segmented data fields provide useful structure

• Visual hierarchy lets people focus on the relevant
information
Visual hierarchy is equally important in interactive control
panels and forms -perhaps even more so.

Perception. READING
• Speaking and undestanding spoken language is a NATURAL human
ability, Reading IS NOT
• Learning to read involves training our brain (& our visual system) to
recognize patterns
Reading involves recognizing features and patterns
• Feature-driven (bottom-up or context-free) reading
• The brain’s ability to recognize basic features (lines, edges, angles, etc.) is built
in and therefore automatic from birth.
• Recognition of morphemes, words, and phrases has to be learned.
• Context-driven (top-down) reading
• The visual system starts by recognizing high-level patterns (words, phrases,
and sentences) or by knowing the text’s meaning in advance.
• It then uses that knowledge to figure out (or guess) what the components of
the high-level pattern must be.
… Context [is] important, but it’s a more important aid for the
poorer reader who doesn’t have automatic context-free
recognition instantiated

4QU357M15547G353RV31XP3R4 PR0V4RQU3 L4N057R4M3N7 35F4N74571C41 P07F3RC0535
M3R4V3LL0535!1MPR35510N4N7S!
4LC0M3NÇ4M3N7P0753R37C0574,P3R04R4L4 73V4M3N7LL3G31X4U70M471C4M3N7,53N53
74N50L5P3N54R-H1!
N0M35UN5QU4N75P0D3N LL3G1R41X0.
3NG4NX4-H04L 73UMURS1 H0P075 LL3G1R
Perception: READING: pattern
recognition (top-down processing)
• Can you read this text?? (in catalan)
• Or these?
THE WORK MUST GET DONE. WORK
THE WORK MUST GET DONE. WORK

Perception: READING
• Careful with geek terminology (especially in system or error
messages)
• with difficult
scripts & typefaces
• with tiny fonts
Your session has expired. Please reauthenticate. login again.
ALL CAPS hard to read (letters look more similar to
each other)
Outline typefaces complicate feature recognition
Human–computer Interaction (HCI) is the study, planning, and design of the interaction between people (users) and computers. It is
often regarded as the intersection of computer science, behavioral sciences, design and several other fields of study. Interaction
between users and computers occurs at the user interface (or simply interface), which includes both sw and hw.

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

Memoria de Trabajo (MT) (Memoria
Operativa). Short-Term Memory (STM)
• Short-term memory is not a store —it is not a place where
memories and perceptions go to be worked on.
• It is not a temporary repository for information just brought
in from the sensory system or retrieved from long-term
memory.
• Instead, short-term memory is a combination of
phenomena arising from perception and attention.
• Each of our perceptual senses has its own very
brief short-term “memory” that is the result of
residual neural activity after a perceptual
stimulus

• STM is equal to the focus of our attention. Whatever is in
that focus is what we are conscious of at any
moment.
• Right now you are conscious of the last few words and ideas
you’ve read, but probably not the color of the wall in front of you.
• But now that I’ve shifted your attention, you are conscious of the
wall’s color, and may have forgotten some of the ideas you read on
the previous page
• The primary characteristics of STM are its low capacity
and its volatility

• Designing a menú (web, phone, ...):
• How many options should have?
• A few? ... But, how many options is “few” ??
• 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

• 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.

• 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
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.
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.

UI DESIGN implications
• The capacity and volatility of short-term memory have
many implications for the design of interactive computer
systems.
• UI should help people remember essential
information from one moment to the next.
• Don’t require people to remember system status or
what they have done, because their attention is
focused on their primary goal and progress toward it.
There are two things that every designed screen must do well:
describe the current step and describe the next step. It’s as
simple…and hard…as that.
http://bokardo.com/archives/designing-for-the-next-step

POBLACIÓ 2
POBLACIÓ 1

• Regular dropdown menus in large, multi-level sites
typically hide some or many of the options from the user.
• This requires them to
scroll, search or
remember where
particular options are
within the user
interface,
• more interactively
demanding (i.e. more
clicking is required)
• more cognitively
demanding (i.e. recall
from short-term
memory is required) Mega Dropdown menu (Fat menu)
http://www.nngroup.com/articles/mega-menus-work-well

Memoria de Largo Plazo (MLP).
Long-Term Memory (LTM)
• It actually is a MEMORY STORE
• the capacity of human long-term memory seems almost unlimited
• weaknesses:
• error-prone,
• impressionist (weighted by
emotions),
• free-associative,
• idiosyncratic (muy personal),
• retroactively alterable,
• easily biased by a variety of
factors at the time of recording
or of retrieval.
Testing is easier:
- What was your previous phone
number (or car identification)?
- What was your first grade
teacher’s name? Second
grade? Third grade? …
- What Web site was presented
earlier that show …?
- An exam,
- …..

• 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

This kind of registration
burdens long-term
memory: users may have
no unique, memorable
answer for any of the
questions

• 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]

• Recognition vs Recall, golden rules:
1. See and choose is easier than recall and type
See & choose
Remember & type C> copy doc1 doc2
C> remove fileA
See & choose

• Recognition vs Recall, golden rules:
2. Use pictures where possible to convey function

• 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

• 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?

And be aware about
• Our STM decreases with
age.
• However, we can draw
on much more
background knowledge
in our LTM.
Model Human Processor

Affordance (captación intuitiva)
• Las affordances son las
funciones de un objeto que
el observador percibe
directamente a partir de su
imagen.
• Una buena affordance
atrae al usuario, lo invita a
interactuar con el sistema
sin necesidad de consultar
la ayuda
http://www.grihotools.udl.cat/mpiua/affordances
http://en.wikipedia.org/wiki/Affordance
Everyday designs “intuitivos”:
manecilla para abrir la puerta del
coche

• Requisitos para maximizar la efectividad de las
affordances
• Forma funcional
• un usuario al percibir un botón, la primera impresión que tiene es la de
estar ante un objeto “para ser presionado”
• Visibilidad al usuario
• Elementos como los “links emergentes” que tan solo aparecen cuando
el usuario sitúa encima de los mismos el puntero del ratón, no son
aconsejables en la medida en que no hacen visible su función a
primera vista
• Acción coherente
• Un botón para acceder a un menú oculto que se identifique con una
flecha señalando abajo, deberá presentar el menú desde ese punto y
hacia abajo
• Relatividad del observador: un problema de las affordances es
que no suscitan la misma función a todo tipo de población
• un banco en un parque puede presentar el affordance “sentarse en él”
para un anciano, y “escalarlo” para un niño pequeño

Affordance. The Principle of 'Visibility'
• VISIBILITY is an important design principle
• if a user cannot see the means of achieving their goals, they will
either
• waste time searching for them, or
• simply seek alternative websites, devices or designs that do not
impede their productivity in such a way

• un usuario al percibir un botón, la primera impresión que
tiene es la de estar ante un objeto “para ser presionado”
El círculo también da una área de
acierto, pero es menor y el usuario se
suele apoyar en los contornos
Install Now
El cuadrado proporciona un
área mayor de acierto para
el usuario
buscar
Si no pintamos el área de acierto,
el usaurio tiene que apuntar muy
bien para acertar el botón
Install Now

Confusing Affordance
• Which one can
or should be
pressed?
• All three look like
a button, which
means we can
press on it.
The fact is,
only the
middle one is
a button

Affordance & graphic methafors (icons)
• In the battle of clarity between icons and labels, labels
always win.
http://bokardo.com/archives/labels-always-win
Progressive Reduction:
http://layervault.tumblr.com/post/42361
566927/progressive-reduction
familiarity

Affordance & graphic methafors (icons)
• Cuando enviamos un video por Whatsapp, se muestra un cuadro del
video con un widget en el centro que indica el progreso en el envío.
• El widget se compone de:
• un círculo que se muestra con un fondo negro transparente y
• una circunferencia en blanco que va completándose conforme progresa el envío,
• además de un cuadrado plano que funciona como símbolo de stop.
• Cuando el video ha sido descargado,
• el círculo  cambia a un blanco transparente con un triángulo que funciona como
símbolo de play.
• Muy interesante la doble función comunicativa conseguida en este
diseño a pesar de su simpleza
• por un lado, comunica el progreso en el envío, por el otro, refleja su affordance
como botón.
Además, un usuario de Whatsapp sabrá que algo salió mal en
la descarga del vídeo si la circunferencia nunca se completa

Non affordance: Lack of Hover State on
Touch Devices
• On touch devices users lack
the subtle but crucial mouse
hover states which provide
instant indication if something
is clickable or not
• Touch devices do not have
the affordance for “instant
indication if something is
clickable or not”
• This proved a major
problem during user
testing of the mobile sites;
• especially on complex,
navigation heavy sites such as
mobile commerce sites
http://baymard.com/blog/mobile-product-list-hit-areas

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
10 things every designer should know about people
http://www.uxforthemasses.com/10-things-every-designer-should-
know-about-people
Lectura
recomendada

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
Mind: Simple Guide to
Understanding User
Interface Design Rules
Jeff Johnson
Morgan Kaufmann (2010)
100 Things Every Designer
Needs to Know About
People
Susan Weinschenk
New Riders (2011)

El Curso de Interacción Persona-Ordenador ha sido realizado por Toni
Granollers bajo la licencia Creative Commons Reconocimiento-
NoComercial 4.0 Internacional License.

2. El Factor Humano

More Related Content

What's hot

Viewers also liked

Similar to 2. El Factor Humano

More from DCU_MPIUA

Recently uploaded

2. El Factor Humano

Editor's Notes