EL FACTOR HUMANOGrau en Enginyeria InformagraveticaInteraccioacute Persona-Ordinador
Toni GranollersEl Curso de Interaccioacuten Persona-Ordenador ha sido realizado
por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
Presentacioacuten
bull En el pasado los disentildeadores de sistemas no daban ninguna importancia al elemento humano
bull Sabemos por experiencia que el uso de sistemas son muchas veces difiacuteciles complicados y frustrantes
bull Es importante conocer los aspectos humanos de la interaccioacuten para mejorarla
El Factor Humano - GEInformagravetica IPO 2 110
Objetivos
bull Conocer los tipos de percepciones maacutes relevantes desde el punto de vista interactivo que tiene la persona
bull Conocer como se ha realizado el proceso de comprensioacuten y los modelos de memoria
bull Comprender que el modelo de memoria condiciona el disentildeo de la interfaz
bull Ver la importancia que tiene la limitacioacuten de la memoria de trabajo
El Factor Humano - GEInformagravetica IPO 3 110
The Psychologistrsquos View of UX Design
1 People Dont Want to Work or Think More Than They Have To
2 People Have Limitations3 People Make Mistakes4 Human Memory Is Complicated5 People are Social6 Attention (is a key to designing an engaging UI)7 People Crave Information8 Unconscious Processing9 People Create Mental Models10 Visual System
httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=
2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 4 110
httpunbouncecomonline-marketing32-bullseye-ux-posts-to-hit-your-conversion-targets
El Factor Humano - GEInformagravetica IPO 5 110
El Factor Humano - GEInformagravetica IPO 6 110
Un modelo simple del procesamiento de informacioacuten
INPUTpercepciones
OUTPUTMotorcomportamiento
El Factor Humano - GEInformagravetica IPO 7 110
Psicologiacutea cognitiva
bull Disciplina cientiacutefica que estudia el sistema de procesamiento de la informacioacuten en la mente humanabull Cognicioacuten Adquisicioacuten mantenimiento y uso del conocimiento
repeticioacuten
El Factor Humano - GEInformagravetica IPO 8 110
El Factor Humano - GEInformagravetica IPO 9 110
Actividades cognitivas de un usuario
El Factor Humano - GEInformagravetica IPO 10 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 11 110
Modelo procesamiento humano
bull A muy alto nivel podemos describir una persona como un procesador de informacioacuten del cual se distinguenbull Dos partes
1 El conjunto de memorias y procesadores2 El conjunto de principios de operacioacuten
bull Tres subsistemas con mutua interaccioacuten1 El sistema perceptivo tiene sensores y memorias buffer transforma las entradas en coacutedigos
simboacutelicos que son almacenados2 El sistema cognitivo que recibe los coacutedigos simboacutelicos del sistema perceptivo situaacutendolos en
la memoria de trabajo y utiliza esta y la memoria a largo plazo para tomar decisiones3 El sistema motor que ejecuta las respuestas
bull Disponemos debull un procesador perceptivo bull un procesador cognitivo ybull un procesador motor
bull Las memorias se describen a partir debull la capacidad de almacenamientobull el tiempo de decaiacuteda (de un concepto almacenado)bull el tipo principal de coacutedigo (visual fiacutesico )
Que seguacuten las tareas trabajan secuencialmente o en paralelo
El Factor Humano - GEInformagravetica IPO 12 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 13 110
Sistemas sensoriales
bull En la transmisioacuten de informacioacuten del ordenador a la persona hemos de considerar los sistemas sensoriales humanos
Entradabull Percepcioacuten a traveacutes de los
sentidosbull Vistabull Oiacutedobull Tactobull Gustobull Olfato
Salidabull Acciones a traveacutes de los
actuadores (efectores)bull Extremidadesbull Miembrosbull Dedosbull Ojosbull Cabezabull Sistema vocal
El Factor Humano - GEInformagravetica IPO 14 110
Sensacioacuten Los canales de entrada
bull El conocimiento del mundo lo construimos con la vista oiacutedo tacto dolor sensacioacuten de movimientos corporales
bull La percepcioacuten comienza en las ceacutelulas receptoras que son sensibles a uno u otro tipo de estiacutemulos
bull Las viacuteas sensoriales conectan al receptor perifeacuterico con las estructuras centrales del procesamiento
bull El cerebro no registra el mundo externo simplemente como una fotografiacutea tridimensional sino que construye una representacioacuten interna despueacutes de analizar sus componentes
El Factor Humano - GEInformagravetica IPO 15 110
Los canales de entrada Sistema visual
bull Ver es obtener informacioacuten a partir de la energiacutea electromagneacutetica que llega a los ojosbull De la estructura espacial del mundo que nos rodea y los distintos
aspectos que pueden distinguirse en eacutel
bull La luz es la porcioacuten del espectro electromagneacutetico que puede ser detectado por el sistema visual humano
El Factor Humano - GEInformagravetica IPO 16 110
El sistema visual y la IPO
bull Sensacioacutenbull Es la captacioacuten del estiacutemulo fiacutesico y su transformacioacuten en
impulso nervioso
bull Percepcioacutenbull Asignacioacuten de significado al estiacutemulo que ha entrado en nuestro
sistema cognitivo
bull En el nivel sensorio visual hablaremos de color e iluminacioacuten
bull Las personas trabajamos en un ambiente luminoso que influye en como se ve la informacioacuten presentada en la interfaz
El Factor Humano - GEInformagravetica IPO 17 110
El sistema visual
bull 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 Factor Humano - GEInformagravetica IPO 18 110
El sistema visual Limitations
bull Three presentation factors affect our ability to distinguish colors from each other
bull Paleness The paler (less saturated) two colors are the harder it is to tell them apart
bull Color patch size The smaller or thinner objects are the harder it is to distinguish their colors bull Text is often thin so the exact color of text
is often hard to determine
bull 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 Factor Humano - GEInformagravetica IPO 19 110
El sistema visual Limitations
El Factor Humano - GEInformagravetica IPO 20 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Presentacioacuten
bull En el pasado los disentildeadores de sistemas no daban ninguna importancia al elemento humano
bull Sabemos por experiencia que el uso de sistemas son muchas veces difiacuteciles complicados y frustrantes
bull Es importante conocer los aspectos humanos de la interaccioacuten para mejorarla
El Factor Humano - GEInformagravetica IPO 2 110
Objetivos
bull Conocer los tipos de percepciones maacutes relevantes desde el punto de vista interactivo que tiene la persona
bull Conocer como se ha realizado el proceso de comprensioacuten y los modelos de memoria
bull Comprender que el modelo de memoria condiciona el disentildeo de la interfaz
bull Ver la importancia que tiene la limitacioacuten de la memoria de trabajo
El Factor Humano - GEInformagravetica IPO 3 110
The Psychologistrsquos View of UX Design
1 People Dont Want to Work or Think More Than They Have To
2 People Have Limitations3 People Make Mistakes4 Human Memory Is Complicated5 People are Social6 Attention (is a key to designing an engaging UI)7 People Crave Information8 Unconscious Processing9 People Create Mental Models10 Visual System
httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=
2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 4 110
httpunbouncecomonline-marketing32-bullseye-ux-posts-to-hit-your-conversion-targets
El Factor Humano - GEInformagravetica IPO 5 110
El Factor Humano - GEInformagravetica IPO 6 110
Un modelo simple del procesamiento de informacioacuten
INPUTpercepciones
OUTPUTMotorcomportamiento
El Factor Humano - GEInformagravetica IPO 7 110
Psicologiacutea cognitiva
bull Disciplina cientiacutefica que estudia el sistema de procesamiento de la informacioacuten en la mente humanabull Cognicioacuten Adquisicioacuten mantenimiento y uso del conocimiento
repeticioacuten
El Factor Humano - GEInformagravetica IPO 8 110
El Factor Humano - GEInformagravetica IPO 9 110
Actividades cognitivas de un usuario
El Factor Humano - GEInformagravetica IPO 10 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 11 110
Modelo procesamiento humano
bull A muy alto nivel podemos describir una persona como un procesador de informacioacuten del cual se distinguenbull Dos partes
1 El conjunto de memorias y procesadores2 El conjunto de principios de operacioacuten
bull Tres subsistemas con mutua interaccioacuten1 El sistema perceptivo tiene sensores y memorias buffer transforma las entradas en coacutedigos
simboacutelicos que son almacenados2 El sistema cognitivo que recibe los coacutedigos simboacutelicos del sistema perceptivo situaacutendolos en
la memoria de trabajo y utiliza esta y la memoria a largo plazo para tomar decisiones3 El sistema motor que ejecuta las respuestas
bull Disponemos debull un procesador perceptivo bull un procesador cognitivo ybull un procesador motor
bull Las memorias se describen a partir debull la capacidad de almacenamientobull el tiempo de decaiacuteda (de un concepto almacenado)bull el tipo principal de coacutedigo (visual fiacutesico )
Que seguacuten las tareas trabajan secuencialmente o en paralelo
El Factor Humano - GEInformagravetica IPO 12 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 13 110
Sistemas sensoriales
bull En la transmisioacuten de informacioacuten del ordenador a la persona hemos de considerar los sistemas sensoriales humanos
Entradabull Percepcioacuten a traveacutes de los
sentidosbull Vistabull Oiacutedobull Tactobull Gustobull Olfato
Salidabull Acciones a traveacutes de los
actuadores (efectores)bull Extremidadesbull Miembrosbull Dedosbull Ojosbull Cabezabull Sistema vocal
El Factor Humano - GEInformagravetica IPO 14 110
Sensacioacuten Los canales de entrada
bull El conocimiento del mundo lo construimos con la vista oiacutedo tacto dolor sensacioacuten de movimientos corporales
bull La percepcioacuten comienza en las ceacutelulas receptoras que son sensibles a uno u otro tipo de estiacutemulos
bull Las viacuteas sensoriales conectan al receptor perifeacuterico con las estructuras centrales del procesamiento
bull El cerebro no registra el mundo externo simplemente como una fotografiacutea tridimensional sino que construye una representacioacuten interna despueacutes de analizar sus componentes
El Factor Humano - GEInformagravetica IPO 15 110
Los canales de entrada Sistema visual
bull Ver es obtener informacioacuten a partir de la energiacutea electromagneacutetica que llega a los ojosbull De la estructura espacial del mundo que nos rodea y los distintos
aspectos que pueden distinguirse en eacutel
bull La luz es la porcioacuten del espectro electromagneacutetico que puede ser detectado por el sistema visual humano
El Factor Humano - GEInformagravetica IPO 16 110
El sistema visual y la IPO
bull Sensacioacutenbull Es la captacioacuten del estiacutemulo fiacutesico y su transformacioacuten en
impulso nervioso
bull Percepcioacutenbull Asignacioacuten de significado al estiacutemulo que ha entrado en nuestro
sistema cognitivo
bull En el nivel sensorio visual hablaremos de color e iluminacioacuten
bull Las personas trabajamos en un ambiente luminoso que influye en como se ve la informacioacuten presentada en la interfaz
El Factor Humano - GEInformagravetica IPO 17 110
El sistema visual
bull 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 Factor Humano - GEInformagravetica IPO 18 110
El sistema visual Limitations
bull Three presentation factors affect our ability to distinguish colors from each other
bull Paleness The paler (less saturated) two colors are the harder it is to tell them apart
bull Color patch size The smaller or thinner objects are the harder it is to distinguish their colors bull Text is often thin so the exact color of text
is often hard to determine
bull 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 Factor Humano - GEInformagravetica IPO 19 110
El sistema visual Limitations
El Factor Humano - GEInformagravetica IPO 20 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Objetivos
bull Conocer los tipos de percepciones maacutes relevantes desde el punto de vista interactivo que tiene la persona
bull Conocer como se ha realizado el proceso de comprensioacuten y los modelos de memoria
bull Comprender que el modelo de memoria condiciona el disentildeo de la interfaz
bull Ver la importancia que tiene la limitacioacuten de la memoria de trabajo
El Factor Humano - GEInformagravetica IPO 3 110
The Psychologistrsquos View of UX Design
1 People Dont Want to Work or Think More Than They Have To
2 People Have Limitations3 People Make Mistakes4 Human Memory Is Complicated5 People are Social6 Attention (is a key to designing an engaging UI)7 People Crave Information8 Unconscious Processing9 People Create Mental Models10 Visual System
httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=
2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 4 110
httpunbouncecomonline-marketing32-bullseye-ux-posts-to-hit-your-conversion-targets
El Factor Humano - GEInformagravetica IPO 5 110
El Factor Humano - GEInformagravetica IPO 6 110
Un modelo simple del procesamiento de informacioacuten
INPUTpercepciones
OUTPUTMotorcomportamiento
El Factor Humano - GEInformagravetica IPO 7 110
Psicologiacutea cognitiva
bull Disciplina cientiacutefica que estudia el sistema de procesamiento de la informacioacuten en la mente humanabull Cognicioacuten Adquisicioacuten mantenimiento y uso del conocimiento
repeticioacuten
El Factor Humano - GEInformagravetica IPO 8 110
El Factor Humano - GEInformagravetica IPO 9 110
Actividades cognitivas de un usuario
El Factor Humano - GEInformagravetica IPO 10 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 11 110
Modelo procesamiento humano
bull A muy alto nivel podemos describir una persona como un procesador de informacioacuten del cual se distinguenbull Dos partes
1 El conjunto de memorias y procesadores2 El conjunto de principios de operacioacuten
bull Tres subsistemas con mutua interaccioacuten1 El sistema perceptivo tiene sensores y memorias buffer transforma las entradas en coacutedigos
simboacutelicos que son almacenados2 El sistema cognitivo que recibe los coacutedigos simboacutelicos del sistema perceptivo situaacutendolos en
la memoria de trabajo y utiliza esta y la memoria a largo plazo para tomar decisiones3 El sistema motor que ejecuta las respuestas
bull Disponemos debull un procesador perceptivo bull un procesador cognitivo ybull un procesador motor
bull Las memorias se describen a partir debull la capacidad de almacenamientobull el tiempo de decaiacuteda (de un concepto almacenado)bull el tipo principal de coacutedigo (visual fiacutesico )
Que seguacuten las tareas trabajan secuencialmente o en paralelo
El Factor Humano - GEInformagravetica IPO 12 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 13 110
Sistemas sensoriales
bull En la transmisioacuten de informacioacuten del ordenador a la persona hemos de considerar los sistemas sensoriales humanos
Entradabull Percepcioacuten a traveacutes de los
sentidosbull Vistabull Oiacutedobull Tactobull Gustobull Olfato
Salidabull Acciones a traveacutes de los
actuadores (efectores)bull Extremidadesbull Miembrosbull Dedosbull Ojosbull Cabezabull Sistema vocal
El Factor Humano - GEInformagravetica IPO 14 110
Sensacioacuten Los canales de entrada
bull El conocimiento del mundo lo construimos con la vista oiacutedo tacto dolor sensacioacuten de movimientos corporales
bull La percepcioacuten comienza en las ceacutelulas receptoras que son sensibles a uno u otro tipo de estiacutemulos
bull Las viacuteas sensoriales conectan al receptor perifeacuterico con las estructuras centrales del procesamiento
bull El cerebro no registra el mundo externo simplemente como una fotografiacutea tridimensional sino que construye una representacioacuten interna despueacutes de analizar sus componentes
El Factor Humano - GEInformagravetica IPO 15 110
Los canales de entrada Sistema visual
bull Ver es obtener informacioacuten a partir de la energiacutea electromagneacutetica que llega a los ojosbull De la estructura espacial del mundo que nos rodea y los distintos
aspectos que pueden distinguirse en eacutel
bull La luz es la porcioacuten del espectro electromagneacutetico que puede ser detectado por el sistema visual humano
El Factor Humano - GEInformagravetica IPO 16 110
El sistema visual y la IPO
bull Sensacioacutenbull Es la captacioacuten del estiacutemulo fiacutesico y su transformacioacuten en
impulso nervioso
bull Percepcioacutenbull Asignacioacuten de significado al estiacutemulo que ha entrado en nuestro
sistema cognitivo
bull En el nivel sensorio visual hablaremos de color e iluminacioacuten
bull Las personas trabajamos en un ambiente luminoso que influye en como se ve la informacioacuten presentada en la interfaz
El Factor Humano - GEInformagravetica IPO 17 110
El sistema visual
bull 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 Factor Humano - GEInformagravetica IPO 18 110
El sistema visual Limitations
bull Three presentation factors affect our ability to distinguish colors from each other
bull Paleness The paler (less saturated) two colors are the harder it is to tell them apart
bull Color patch size The smaller or thinner objects are the harder it is to distinguish their colors bull Text is often thin so the exact color of text
is often hard to determine
bull 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 Factor Humano - GEInformagravetica IPO 19 110
El sistema visual Limitations
El Factor Humano - GEInformagravetica IPO 20 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
The Psychologistrsquos View of UX Design
1 People Dont Want to Work or Think More Than They Have To
2 People Have Limitations3 People Make Mistakes4 Human Memory Is Complicated5 People are Social6 Attention (is a key to designing an engaging UI)7 People Crave Information8 Unconscious Processing9 People Create Mental Models10 Visual System
httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=
2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 4 110
httpunbouncecomonline-marketing32-bullseye-ux-posts-to-hit-your-conversion-targets
El Factor Humano - GEInformagravetica IPO 5 110
El Factor Humano - GEInformagravetica IPO 6 110
Un modelo simple del procesamiento de informacioacuten
INPUTpercepciones
OUTPUTMotorcomportamiento
El Factor Humano - GEInformagravetica IPO 7 110
Psicologiacutea cognitiva
bull Disciplina cientiacutefica que estudia el sistema de procesamiento de la informacioacuten en la mente humanabull Cognicioacuten Adquisicioacuten mantenimiento y uso del conocimiento
repeticioacuten
El Factor Humano - GEInformagravetica IPO 8 110
El Factor Humano - GEInformagravetica IPO 9 110
Actividades cognitivas de un usuario
El Factor Humano - GEInformagravetica IPO 10 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 11 110
Modelo procesamiento humano
bull A muy alto nivel podemos describir una persona como un procesador de informacioacuten del cual se distinguenbull Dos partes
1 El conjunto de memorias y procesadores2 El conjunto de principios de operacioacuten
bull Tres subsistemas con mutua interaccioacuten1 El sistema perceptivo tiene sensores y memorias buffer transforma las entradas en coacutedigos
simboacutelicos que son almacenados2 El sistema cognitivo que recibe los coacutedigos simboacutelicos del sistema perceptivo situaacutendolos en
la memoria de trabajo y utiliza esta y la memoria a largo plazo para tomar decisiones3 El sistema motor que ejecuta las respuestas
bull Disponemos debull un procesador perceptivo bull un procesador cognitivo ybull un procesador motor
bull Las memorias se describen a partir debull la capacidad de almacenamientobull el tiempo de decaiacuteda (de un concepto almacenado)bull el tipo principal de coacutedigo (visual fiacutesico )
Que seguacuten las tareas trabajan secuencialmente o en paralelo
El Factor Humano - GEInformagravetica IPO 12 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 13 110
Sistemas sensoriales
bull En la transmisioacuten de informacioacuten del ordenador a la persona hemos de considerar los sistemas sensoriales humanos
Entradabull Percepcioacuten a traveacutes de los
sentidosbull Vistabull Oiacutedobull Tactobull Gustobull Olfato
Salidabull Acciones a traveacutes de los
actuadores (efectores)bull Extremidadesbull Miembrosbull Dedosbull Ojosbull Cabezabull Sistema vocal
El Factor Humano - GEInformagravetica IPO 14 110
Sensacioacuten Los canales de entrada
bull El conocimiento del mundo lo construimos con la vista oiacutedo tacto dolor sensacioacuten de movimientos corporales
bull La percepcioacuten comienza en las ceacutelulas receptoras que son sensibles a uno u otro tipo de estiacutemulos
bull Las viacuteas sensoriales conectan al receptor perifeacuterico con las estructuras centrales del procesamiento
bull El cerebro no registra el mundo externo simplemente como una fotografiacutea tridimensional sino que construye una representacioacuten interna despueacutes de analizar sus componentes
El Factor Humano - GEInformagravetica IPO 15 110
Los canales de entrada Sistema visual
bull Ver es obtener informacioacuten a partir de la energiacutea electromagneacutetica que llega a los ojosbull De la estructura espacial del mundo que nos rodea y los distintos
aspectos que pueden distinguirse en eacutel
bull La luz es la porcioacuten del espectro electromagneacutetico que puede ser detectado por el sistema visual humano
El Factor Humano - GEInformagravetica IPO 16 110
El sistema visual y la IPO
bull Sensacioacutenbull Es la captacioacuten del estiacutemulo fiacutesico y su transformacioacuten en
impulso nervioso
bull Percepcioacutenbull Asignacioacuten de significado al estiacutemulo que ha entrado en nuestro
sistema cognitivo
bull En el nivel sensorio visual hablaremos de color e iluminacioacuten
bull Las personas trabajamos en un ambiente luminoso que influye en como se ve la informacioacuten presentada en la interfaz
El Factor Humano - GEInformagravetica IPO 17 110
El sistema visual
bull 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 Factor Humano - GEInformagravetica IPO 18 110
El sistema visual Limitations
bull Three presentation factors affect our ability to distinguish colors from each other
bull Paleness The paler (less saturated) two colors are the harder it is to tell them apart
bull Color patch size The smaller or thinner objects are the harder it is to distinguish their colors bull Text is often thin so the exact color of text
is often hard to determine
bull 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 Factor Humano - GEInformagravetica IPO 19 110
El sistema visual Limitations
El Factor Humano - GEInformagravetica IPO 20 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
httpunbouncecomonline-marketing32-bullseye-ux-posts-to-hit-your-conversion-targets
El Factor Humano - GEInformagravetica IPO 5 110
El Factor Humano - GEInformagravetica IPO 6 110
Un modelo simple del procesamiento de informacioacuten
INPUTpercepciones
OUTPUTMotorcomportamiento
El Factor Humano - GEInformagravetica IPO 7 110
Psicologiacutea cognitiva
bull Disciplina cientiacutefica que estudia el sistema de procesamiento de la informacioacuten en la mente humanabull Cognicioacuten Adquisicioacuten mantenimiento y uso del conocimiento
repeticioacuten
El Factor Humano - GEInformagravetica IPO 8 110
El Factor Humano - GEInformagravetica IPO 9 110
Actividades cognitivas de un usuario
El Factor Humano - GEInformagravetica IPO 10 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 11 110
Modelo procesamiento humano
bull A muy alto nivel podemos describir una persona como un procesador de informacioacuten del cual se distinguenbull Dos partes
1 El conjunto de memorias y procesadores2 El conjunto de principios de operacioacuten
bull Tres subsistemas con mutua interaccioacuten1 El sistema perceptivo tiene sensores y memorias buffer transforma las entradas en coacutedigos
simboacutelicos que son almacenados2 El sistema cognitivo que recibe los coacutedigos simboacutelicos del sistema perceptivo situaacutendolos en
la memoria de trabajo y utiliza esta y la memoria a largo plazo para tomar decisiones3 El sistema motor que ejecuta las respuestas
bull Disponemos debull un procesador perceptivo bull un procesador cognitivo ybull un procesador motor
bull Las memorias se describen a partir debull la capacidad de almacenamientobull el tiempo de decaiacuteda (de un concepto almacenado)bull el tipo principal de coacutedigo (visual fiacutesico )
Que seguacuten las tareas trabajan secuencialmente o en paralelo
El Factor Humano - GEInformagravetica IPO 12 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 13 110
Sistemas sensoriales
bull En la transmisioacuten de informacioacuten del ordenador a la persona hemos de considerar los sistemas sensoriales humanos
Entradabull Percepcioacuten a traveacutes de los
sentidosbull Vistabull Oiacutedobull Tactobull Gustobull Olfato
Salidabull Acciones a traveacutes de los
actuadores (efectores)bull Extremidadesbull Miembrosbull Dedosbull Ojosbull Cabezabull Sistema vocal
El Factor Humano - GEInformagravetica IPO 14 110
Sensacioacuten Los canales de entrada
bull El conocimiento del mundo lo construimos con la vista oiacutedo tacto dolor sensacioacuten de movimientos corporales
bull La percepcioacuten comienza en las ceacutelulas receptoras que son sensibles a uno u otro tipo de estiacutemulos
bull Las viacuteas sensoriales conectan al receptor perifeacuterico con las estructuras centrales del procesamiento
bull El cerebro no registra el mundo externo simplemente como una fotografiacutea tridimensional sino que construye una representacioacuten interna despueacutes de analizar sus componentes
El Factor Humano - GEInformagravetica IPO 15 110
Los canales de entrada Sistema visual
bull Ver es obtener informacioacuten a partir de la energiacutea electromagneacutetica que llega a los ojosbull De la estructura espacial del mundo que nos rodea y los distintos
aspectos que pueden distinguirse en eacutel
bull La luz es la porcioacuten del espectro electromagneacutetico que puede ser detectado por el sistema visual humano
El Factor Humano - GEInformagravetica IPO 16 110
El sistema visual y la IPO
bull Sensacioacutenbull Es la captacioacuten del estiacutemulo fiacutesico y su transformacioacuten en
impulso nervioso
bull Percepcioacutenbull Asignacioacuten de significado al estiacutemulo que ha entrado en nuestro
sistema cognitivo
bull En el nivel sensorio visual hablaremos de color e iluminacioacuten
bull Las personas trabajamos en un ambiente luminoso que influye en como se ve la informacioacuten presentada en la interfaz
El Factor Humano - GEInformagravetica IPO 17 110
El sistema visual
bull 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 Factor Humano - GEInformagravetica IPO 18 110
El sistema visual Limitations
bull Three presentation factors affect our ability to distinguish colors from each other
bull Paleness The paler (less saturated) two colors are the harder it is to tell them apart
bull Color patch size The smaller or thinner objects are the harder it is to distinguish their colors bull Text is often thin so the exact color of text
is often hard to determine
bull 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 Factor Humano - GEInformagravetica IPO 19 110
El sistema visual Limitations
El Factor Humano - GEInformagravetica IPO 20 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
El Factor Humano - GEInformagravetica IPO 6 110
Un modelo simple del procesamiento de informacioacuten
INPUTpercepciones
OUTPUTMotorcomportamiento
El Factor Humano - GEInformagravetica IPO 7 110
Psicologiacutea cognitiva
bull Disciplina cientiacutefica que estudia el sistema de procesamiento de la informacioacuten en la mente humanabull Cognicioacuten Adquisicioacuten mantenimiento y uso del conocimiento
repeticioacuten
El Factor Humano - GEInformagravetica IPO 8 110
El Factor Humano - GEInformagravetica IPO 9 110
Actividades cognitivas de un usuario
El Factor Humano - GEInformagravetica IPO 10 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 11 110
Modelo procesamiento humano
bull A muy alto nivel podemos describir una persona como un procesador de informacioacuten del cual se distinguenbull Dos partes
1 El conjunto de memorias y procesadores2 El conjunto de principios de operacioacuten
bull Tres subsistemas con mutua interaccioacuten1 El sistema perceptivo tiene sensores y memorias buffer transforma las entradas en coacutedigos
simboacutelicos que son almacenados2 El sistema cognitivo que recibe los coacutedigos simboacutelicos del sistema perceptivo situaacutendolos en
la memoria de trabajo y utiliza esta y la memoria a largo plazo para tomar decisiones3 El sistema motor que ejecuta las respuestas
bull Disponemos debull un procesador perceptivo bull un procesador cognitivo ybull un procesador motor
bull Las memorias se describen a partir debull la capacidad de almacenamientobull el tiempo de decaiacuteda (de un concepto almacenado)bull el tipo principal de coacutedigo (visual fiacutesico )
Que seguacuten las tareas trabajan secuencialmente o en paralelo
El Factor Humano - GEInformagravetica IPO 12 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 13 110
Sistemas sensoriales
bull En la transmisioacuten de informacioacuten del ordenador a la persona hemos de considerar los sistemas sensoriales humanos
Entradabull Percepcioacuten a traveacutes de los
sentidosbull Vistabull Oiacutedobull Tactobull Gustobull Olfato
Salidabull Acciones a traveacutes de los
actuadores (efectores)bull Extremidadesbull Miembrosbull Dedosbull Ojosbull Cabezabull Sistema vocal
El Factor Humano - GEInformagravetica IPO 14 110
Sensacioacuten Los canales de entrada
bull El conocimiento del mundo lo construimos con la vista oiacutedo tacto dolor sensacioacuten de movimientos corporales
bull La percepcioacuten comienza en las ceacutelulas receptoras que son sensibles a uno u otro tipo de estiacutemulos
bull Las viacuteas sensoriales conectan al receptor perifeacuterico con las estructuras centrales del procesamiento
bull El cerebro no registra el mundo externo simplemente como una fotografiacutea tridimensional sino que construye una representacioacuten interna despueacutes de analizar sus componentes
El Factor Humano - GEInformagravetica IPO 15 110
Los canales de entrada Sistema visual
bull Ver es obtener informacioacuten a partir de la energiacutea electromagneacutetica que llega a los ojosbull De la estructura espacial del mundo que nos rodea y los distintos
aspectos que pueden distinguirse en eacutel
bull La luz es la porcioacuten del espectro electromagneacutetico que puede ser detectado por el sistema visual humano
El Factor Humano - GEInformagravetica IPO 16 110
El sistema visual y la IPO
bull Sensacioacutenbull Es la captacioacuten del estiacutemulo fiacutesico y su transformacioacuten en
impulso nervioso
bull Percepcioacutenbull Asignacioacuten de significado al estiacutemulo que ha entrado en nuestro
sistema cognitivo
bull En el nivel sensorio visual hablaremos de color e iluminacioacuten
bull Las personas trabajamos en un ambiente luminoso que influye en como se ve la informacioacuten presentada en la interfaz
El Factor Humano - GEInformagravetica IPO 17 110
El sistema visual
bull 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 Factor Humano - GEInformagravetica IPO 18 110
El sistema visual Limitations
bull Three presentation factors affect our ability to distinguish colors from each other
bull Paleness The paler (less saturated) two colors are the harder it is to tell them apart
bull Color patch size The smaller or thinner objects are the harder it is to distinguish their colors bull Text is often thin so the exact color of text
is often hard to determine
bull 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 Factor Humano - GEInformagravetica IPO 19 110
El sistema visual Limitations
El Factor Humano - GEInformagravetica IPO 20 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Un modelo simple del procesamiento de informacioacuten
INPUTpercepciones
OUTPUTMotorcomportamiento
El Factor Humano - GEInformagravetica IPO 7 110
Psicologiacutea cognitiva
bull Disciplina cientiacutefica que estudia el sistema de procesamiento de la informacioacuten en la mente humanabull Cognicioacuten Adquisicioacuten mantenimiento y uso del conocimiento
repeticioacuten
El Factor Humano - GEInformagravetica IPO 8 110
El Factor Humano - GEInformagravetica IPO 9 110
Actividades cognitivas de un usuario
El Factor Humano - GEInformagravetica IPO 10 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 11 110
Modelo procesamiento humano
bull A muy alto nivel podemos describir una persona como un procesador de informacioacuten del cual se distinguenbull Dos partes
1 El conjunto de memorias y procesadores2 El conjunto de principios de operacioacuten
bull Tres subsistemas con mutua interaccioacuten1 El sistema perceptivo tiene sensores y memorias buffer transforma las entradas en coacutedigos
simboacutelicos que son almacenados2 El sistema cognitivo que recibe los coacutedigos simboacutelicos del sistema perceptivo situaacutendolos en
la memoria de trabajo y utiliza esta y la memoria a largo plazo para tomar decisiones3 El sistema motor que ejecuta las respuestas
bull Disponemos debull un procesador perceptivo bull un procesador cognitivo ybull un procesador motor
bull Las memorias se describen a partir debull la capacidad de almacenamientobull el tiempo de decaiacuteda (de un concepto almacenado)bull el tipo principal de coacutedigo (visual fiacutesico )
Que seguacuten las tareas trabajan secuencialmente o en paralelo
El Factor Humano - GEInformagravetica IPO 12 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 13 110
Sistemas sensoriales
bull En la transmisioacuten de informacioacuten del ordenador a la persona hemos de considerar los sistemas sensoriales humanos
Entradabull Percepcioacuten a traveacutes de los
sentidosbull Vistabull Oiacutedobull Tactobull Gustobull Olfato
Salidabull Acciones a traveacutes de los
actuadores (efectores)bull Extremidadesbull Miembrosbull Dedosbull Ojosbull Cabezabull Sistema vocal
El Factor Humano - GEInformagravetica IPO 14 110
Sensacioacuten Los canales de entrada
bull El conocimiento del mundo lo construimos con la vista oiacutedo tacto dolor sensacioacuten de movimientos corporales
bull La percepcioacuten comienza en las ceacutelulas receptoras que son sensibles a uno u otro tipo de estiacutemulos
bull Las viacuteas sensoriales conectan al receptor perifeacuterico con las estructuras centrales del procesamiento
bull El cerebro no registra el mundo externo simplemente como una fotografiacutea tridimensional sino que construye una representacioacuten interna despueacutes de analizar sus componentes
El Factor Humano - GEInformagravetica IPO 15 110
Los canales de entrada Sistema visual
bull Ver es obtener informacioacuten a partir de la energiacutea electromagneacutetica que llega a los ojosbull De la estructura espacial del mundo que nos rodea y los distintos
aspectos que pueden distinguirse en eacutel
bull La luz es la porcioacuten del espectro electromagneacutetico que puede ser detectado por el sistema visual humano
El Factor Humano - GEInformagravetica IPO 16 110
El sistema visual y la IPO
bull Sensacioacutenbull Es la captacioacuten del estiacutemulo fiacutesico y su transformacioacuten en
impulso nervioso
bull Percepcioacutenbull Asignacioacuten de significado al estiacutemulo que ha entrado en nuestro
sistema cognitivo
bull En el nivel sensorio visual hablaremos de color e iluminacioacuten
bull Las personas trabajamos en un ambiente luminoso que influye en como se ve la informacioacuten presentada en la interfaz
El Factor Humano - GEInformagravetica IPO 17 110
El sistema visual
bull 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 Factor Humano - GEInformagravetica IPO 18 110
El sistema visual Limitations
bull Three presentation factors affect our ability to distinguish colors from each other
bull Paleness The paler (less saturated) two colors are the harder it is to tell them apart
bull Color patch size The smaller or thinner objects are the harder it is to distinguish their colors bull Text is often thin so the exact color of text
is often hard to determine
bull 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 Factor Humano - GEInformagravetica IPO 19 110
El sistema visual Limitations
El Factor Humano - GEInformagravetica IPO 20 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Psicologiacutea cognitiva
bull Disciplina cientiacutefica que estudia el sistema de procesamiento de la informacioacuten en la mente humanabull Cognicioacuten Adquisicioacuten mantenimiento y uso del conocimiento
repeticioacuten
El Factor Humano - GEInformagravetica IPO 8 110
El Factor Humano - GEInformagravetica IPO 9 110
Actividades cognitivas de un usuario
El Factor Humano - GEInformagravetica IPO 10 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 11 110
Modelo procesamiento humano
bull A muy alto nivel podemos describir una persona como un procesador de informacioacuten del cual se distinguenbull Dos partes
1 El conjunto de memorias y procesadores2 El conjunto de principios de operacioacuten
bull Tres subsistemas con mutua interaccioacuten1 El sistema perceptivo tiene sensores y memorias buffer transforma las entradas en coacutedigos
simboacutelicos que son almacenados2 El sistema cognitivo que recibe los coacutedigos simboacutelicos del sistema perceptivo situaacutendolos en
la memoria de trabajo y utiliza esta y la memoria a largo plazo para tomar decisiones3 El sistema motor que ejecuta las respuestas
bull Disponemos debull un procesador perceptivo bull un procesador cognitivo ybull un procesador motor
bull Las memorias se describen a partir debull la capacidad de almacenamientobull el tiempo de decaiacuteda (de un concepto almacenado)bull el tipo principal de coacutedigo (visual fiacutesico )
Que seguacuten las tareas trabajan secuencialmente o en paralelo
El Factor Humano - GEInformagravetica IPO 12 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 13 110
Sistemas sensoriales
bull En la transmisioacuten de informacioacuten del ordenador a la persona hemos de considerar los sistemas sensoriales humanos
Entradabull Percepcioacuten a traveacutes de los
sentidosbull Vistabull Oiacutedobull Tactobull Gustobull Olfato
Salidabull Acciones a traveacutes de los
actuadores (efectores)bull Extremidadesbull Miembrosbull Dedosbull Ojosbull Cabezabull Sistema vocal
El Factor Humano - GEInformagravetica IPO 14 110
Sensacioacuten Los canales de entrada
bull El conocimiento del mundo lo construimos con la vista oiacutedo tacto dolor sensacioacuten de movimientos corporales
bull La percepcioacuten comienza en las ceacutelulas receptoras que son sensibles a uno u otro tipo de estiacutemulos
bull Las viacuteas sensoriales conectan al receptor perifeacuterico con las estructuras centrales del procesamiento
bull El cerebro no registra el mundo externo simplemente como una fotografiacutea tridimensional sino que construye una representacioacuten interna despueacutes de analizar sus componentes
El Factor Humano - GEInformagravetica IPO 15 110
Los canales de entrada Sistema visual
bull Ver es obtener informacioacuten a partir de la energiacutea electromagneacutetica que llega a los ojosbull De la estructura espacial del mundo que nos rodea y los distintos
aspectos que pueden distinguirse en eacutel
bull La luz es la porcioacuten del espectro electromagneacutetico que puede ser detectado por el sistema visual humano
El Factor Humano - GEInformagravetica IPO 16 110
El sistema visual y la IPO
bull Sensacioacutenbull Es la captacioacuten del estiacutemulo fiacutesico y su transformacioacuten en
impulso nervioso
bull Percepcioacutenbull Asignacioacuten de significado al estiacutemulo que ha entrado en nuestro
sistema cognitivo
bull En el nivel sensorio visual hablaremos de color e iluminacioacuten
bull Las personas trabajamos en un ambiente luminoso que influye en como se ve la informacioacuten presentada en la interfaz
El Factor Humano - GEInformagravetica IPO 17 110
El sistema visual
bull 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 Factor Humano - GEInformagravetica IPO 18 110
El sistema visual Limitations
bull Three presentation factors affect our ability to distinguish colors from each other
bull Paleness The paler (less saturated) two colors are the harder it is to tell them apart
bull Color patch size The smaller or thinner objects are the harder it is to distinguish their colors bull Text is often thin so the exact color of text
is often hard to determine
bull 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 Factor Humano - GEInformagravetica IPO 19 110
El sistema visual Limitations
El Factor Humano - GEInformagravetica IPO 20 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
El Factor Humano - GEInformagravetica IPO 9 110
Actividades cognitivas de un usuario
El Factor Humano - GEInformagravetica IPO 10 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 11 110
Modelo procesamiento humano
bull A muy alto nivel podemos describir una persona como un procesador de informacioacuten del cual se distinguenbull Dos partes
1 El conjunto de memorias y procesadores2 El conjunto de principios de operacioacuten
bull Tres subsistemas con mutua interaccioacuten1 El sistema perceptivo tiene sensores y memorias buffer transforma las entradas en coacutedigos
simboacutelicos que son almacenados2 El sistema cognitivo que recibe los coacutedigos simboacutelicos del sistema perceptivo situaacutendolos en
la memoria de trabajo y utiliza esta y la memoria a largo plazo para tomar decisiones3 El sistema motor que ejecuta las respuestas
bull Disponemos debull un procesador perceptivo bull un procesador cognitivo ybull un procesador motor
bull Las memorias se describen a partir debull la capacidad de almacenamientobull el tiempo de decaiacuteda (de un concepto almacenado)bull el tipo principal de coacutedigo (visual fiacutesico )
Que seguacuten las tareas trabajan secuencialmente o en paralelo
El Factor Humano - GEInformagravetica IPO 12 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 13 110
Sistemas sensoriales
bull En la transmisioacuten de informacioacuten del ordenador a la persona hemos de considerar los sistemas sensoriales humanos
Entradabull Percepcioacuten a traveacutes de los
sentidosbull Vistabull Oiacutedobull Tactobull Gustobull Olfato
Salidabull Acciones a traveacutes de los
actuadores (efectores)bull Extremidadesbull Miembrosbull Dedosbull Ojosbull Cabezabull Sistema vocal
El Factor Humano - GEInformagravetica IPO 14 110
Sensacioacuten Los canales de entrada
bull El conocimiento del mundo lo construimos con la vista oiacutedo tacto dolor sensacioacuten de movimientos corporales
bull La percepcioacuten comienza en las ceacutelulas receptoras que son sensibles a uno u otro tipo de estiacutemulos
bull Las viacuteas sensoriales conectan al receptor perifeacuterico con las estructuras centrales del procesamiento
bull El cerebro no registra el mundo externo simplemente como una fotografiacutea tridimensional sino que construye una representacioacuten interna despueacutes de analizar sus componentes
El Factor Humano - GEInformagravetica IPO 15 110
Los canales de entrada Sistema visual
bull Ver es obtener informacioacuten a partir de la energiacutea electromagneacutetica que llega a los ojosbull De la estructura espacial del mundo que nos rodea y los distintos
aspectos que pueden distinguirse en eacutel
bull La luz es la porcioacuten del espectro electromagneacutetico que puede ser detectado por el sistema visual humano
El Factor Humano - GEInformagravetica IPO 16 110
El sistema visual y la IPO
bull Sensacioacutenbull Es la captacioacuten del estiacutemulo fiacutesico y su transformacioacuten en
impulso nervioso
bull Percepcioacutenbull Asignacioacuten de significado al estiacutemulo que ha entrado en nuestro
sistema cognitivo
bull En el nivel sensorio visual hablaremos de color e iluminacioacuten
bull Las personas trabajamos en un ambiente luminoso que influye en como se ve la informacioacuten presentada en la interfaz
El Factor Humano - GEInformagravetica IPO 17 110
El sistema visual
bull 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 Factor Humano - GEInformagravetica IPO 18 110
El sistema visual Limitations
bull Three presentation factors affect our ability to distinguish colors from each other
bull Paleness The paler (less saturated) two colors are the harder it is to tell them apart
bull Color patch size The smaller or thinner objects are the harder it is to distinguish their colors bull Text is often thin so the exact color of text
is often hard to determine
bull 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 Factor Humano - GEInformagravetica IPO 19 110
El sistema visual Limitations
El Factor Humano - GEInformagravetica IPO 20 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Actividades cognitivas de un usuario
El Factor Humano - GEInformagravetica IPO 10 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 11 110
Modelo procesamiento humano
bull A muy alto nivel podemos describir una persona como un procesador de informacioacuten del cual se distinguenbull Dos partes
1 El conjunto de memorias y procesadores2 El conjunto de principios de operacioacuten
bull Tres subsistemas con mutua interaccioacuten1 El sistema perceptivo tiene sensores y memorias buffer transforma las entradas en coacutedigos
simboacutelicos que son almacenados2 El sistema cognitivo que recibe los coacutedigos simboacutelicos del sistema perceptivo situaacutendolos en
la memoria de trabajo y utiliza esta y la memoria a largo plazo para tomar decisiones3 El sistema motor que ejecuta las respuestas
bull Disponemos debull un procesador perceptivo bull un procesador cognitivo ybull un procesador motor
bull Las memorias se describen a partir debull la capacidad de almacenamientobull el tiempo de decaiacuteda (de un concepto almacenado)bull el tipo principal de coacutedigo (visual fiacutesico )
Que seguacuten las tareas trabajan secuencialmente o en paralelo
El Factor Humano - GEInformagravetica IPO 12 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 13 110
Sistemas sensoriales
bull En la transmisioacuten de informacioacuten del ordenador a la persona hemos de considerar los sistemas sensoriales humanos
Entradabull Percepcioacuten a traveacutes de los
sentidosbull Vistabull Oiacutedobull Tactobull Gustobull Olfato
Salidabull Acciones a traveacutes de los
actuadores (efectores)bull Extremidadesbull Miembrosbull Dedosbull Ojosbull Cabezabull Sistema vocal
El Factor Humano - GEInformagravetica IPO 14 110
Sensacioacuten Los canales de entrada
bull El conocimiento del mundo lo construimos con la vista oiacutedo tacto dolor sensacioacuten de movimientos corporales
bull La percepcioacuten comienza en las ceacutelulas receptoras que son sensibles a uno u otro tipo de estiacutemulos
bull Las viacuteas sensoriales conectan al receptor perifeacuterico con las estructuras centrales del procesamiento
bull El cerebro no registra el mundo externo simplemente como una fotografiacutea tridimensional sino que construye una representacioacuten interna despueacutes de analizar sus componentes
El Factor Humano - GEInformagravetica IPO 15 110
Los canales de entrada Sistema visual
bull Ver es obtener informacioacuten a partir de la energiacutea electromagneacutetica que llega a los ojosbull De la estructura espacial del mundo que nos rodea y los distintos
aspectos que pueden distinguirse en eacutel
bull La luz es la porcioacuten del espectro electromagneacutetico que puede ser detectado por el sistema visual humano
El Factor Humano - GEInformagravetica IPO 16 110
El sistema visual y la IPO
bull Sensacioacutenbull Es la captacioacuten del estiacutemulo fiacutesico y su transformacioacuten en
impulso nervioso
bull Percepcioacutenbull Asignacioacuten de significado al estiacutemulo que ha entrado en nuestro
sistema cognitivo
bull En el nivel sensorio visual hablaremos de color e iluminacioacuten
bull Las personas trabajamos en un ambiente luminoso que influye en como se ve la informacioacuten presentada en la interfaz
El Factor Humano - GEInformagravetica IPO 17 110
El sistema visual
bull 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 Factor Humano - GEInformagravetica IPO 18 110
El sistema visual Limitations
bull Three presentation factors affect our ability to distinguish colors from each other
bull Paleness The paler (less saturated) two colors are the harder it is to tell them apart
bull Color patch size The smaller or thinner objects are the harder it is to distinguish their colors bull Text is often thin so the exact color of text
is often hard to determine
bull 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 Factor Humano - GEInformagravetica IPO 19 110
El sistema visual Limitations
El Factor Humano - GEInformagravetica IPO 20 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 11 110
Modelo procesamiento humano
bull A muy alto nivel podemos describir una persona como un procesador de informacioacuten del cual se distinguenbull Dos partes
1 El conjunto de memorias y procesadores2 El conjunto de principios de operacioacuten
bull Tres subsistemas con mutua interaccioacuten1 El sistema perceptivo tiene sensores y memorias buffer transforma las entradas en coacutedigos
simboacutelicos que son almacenados2 El sistema cognitivo que recibe los coacutedigos simboacutelicos del sistema perceptivo situaacutendolos en
la memoria de trabajo y utiliza esta y la memoria a largo plazo para tomar decisiones3 El sistema motor que ejecuta las respuestas
bull Disponemos debull un procesador perceptivo bull un procesador cognitivo ybull un procesador motor
bull Las memorias se describen a partir debull la capacidad de almacenamientobull el tiempo de decaiacuteda (de un concepto almacenado)bull el tipo principal de coacutedigo (visual fiacutesico )
Que seguacuten las tareas trabajan secuencialmente o en paralelo
El Factor Humano - GEInformagravetica IPO 12 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 13 110
Sistemas sensoriales
bull En la transmisioacuten de informacioacuten del ordenador a la persona hemos de considerar los sistemas sensoriales humanos
Entradabull Percepcioacuten a traveacutes de los
sentidosbull Vistabull Oiacutedobull Tactobull Gustobull Olfato
Salidabull Acciones a traveacutes de los
actuadores (efectores)bull Extremidadesbull Miembrosbull Dedosbull Ojosbull Cabezabull Sistema vocal
El Factor Humano - GEInformagravetica IPO 14 110
Sensacioacuten Los canales de entrada
bull El conocimiento del mundo lo construimos con la vista oiacutedo tacto dolor sensacioacuten de movimientos corporales
bull La percepcioacuten comienza en las ceacutelulas receptoras que son sensibles a uno u otro tipo de estiacutemulos
bull Las viacuteas sensoriales conectan al receptor perifeacuterico con las estructuras centrales del procesamiento
bull El cerebro no registra el mundo externo simplemente como una fotografiacutea tridimensional sino que construye una representacioacuten interna despueacutes de analizar sus componentes
El Factor Humano - GEInformagravetica IPO 15 110
Los canales de entrada Sistema visual
bull Ver es obtener informacioacuten a partir de la energiacutea electromagneacutetica que llega a los ojosbull De la estructura espacial del mundo que nos rodea y los distintos
aspectos que pueden distinguirse en eacutel
bull La luz es la porcioacuten del espectro electromagneacutetico que puede ser detectado por el sistema visual humano
El Factor Humano - GEInformagravetica IPO 16 110
El sistema visual y la IPO
bull Sensacioacutenbull Es la captacioacuten del estiacutemulo fiacutesico y su transformacioacuten en
impulso nervioso
bull Percepcioacutenbull Asignacioacuten de significado al estiacutemulo que ha entrado en nuestro
sistema cognitivo
bull En el nivel sensorio visual hablaremos de color e iluminacioacuten
bull Las personas trabajamos en un ambiente luminoso que influye en como se ve la informacioacuten presentada en la interfaz
El Factor Humano - GEInformagravetica IPO 17 110
El sistema visual
bull 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 Factor Humano - GEInformagravetica IPO 18 110
El sistema visual Limitations
bull Three presentation factors affect our ability to distinguish colors from each other
bull Paleness The paler (less saturated) two colors are the harder it is to tell them apart
bull Color patch size The smaller or thinner objects are the harder it is to distinguish their colors bull Text is often thin so the exact color of text
is often hard to determine
bull 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 Factor Humano - GEInformagravetica IPO 19 110
El sistema visual Limitations
El Factor Humano - GEInformagravetica IPO 20 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Modelo procesamiento humano
bull A muy alto nivel podemos describir una persona como un procesador de informacioacuten del cual se distinguenbull Dos partes
1 El conjunto de memorias y procesadores2 El conjunto de principios de operacioacuten
bull Tres subsistemas con mutua interaccioacuten1 El sistema perceptivo tiene sensores y memorias buffer transforma las entradas en coacutedigos
simboacutelicos que son almacenados2 El sistema cognitivo que recibe los coacutedigos simboacutelicos del sistema perceptivo situaacutendolos en
la memoria de trabajo y utiliza esta y la memoria a largo plazo para tomar decisiones3 El sistema motor que ejecuta las respuestas
bull Disponemos debull un procesador perceptivo bull un procesador cognitivo ybull un procesador motor
bull Las memorias se describen a partir debull la capacidad de almacenamientobull el tiempo de decaiacuteda (de un concepto almacenado)bull el tipo principal de coacutedigo (visual fiacutesico )
Que seguacuten las tareas trabajan secuencialmente o en paralelo
El Factor Humano - GEInformagravetica IPO 12 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 13 110
Sistemas sensoriales
bull En la transmisioacuten de informacioacuten del ordenador a la persona hemos de considerar los sistemas sensoriales humanos
Entradabull Percepcioacuten a traveacutes de los
sentidosbull Vistabull Oiacutedobull Tactobull Gustobull Olfato
Salidabull Acciones a traveacutes de los
actuadores (efectores)bull Extremidadesbull Miembrosbull Dedosbull Ojosbull Cabezabull Sistema vocal
El Factor Humano - GEInformagravetica IPO 14 110
Sensacioacuten Los canales de entrada
bull El conocimiento del mundo lo construimos con la vista oiacutedo tacto dolor sensacioacuten de movimientos corporales
bull La percepcioacuten comienza en las ceacutelulas receptoras que son sensibles a uno u otro tipo de estiacutemulos
bull Las viacuteas sensoriales conectan al receptor perifeacuterico con las estructuras centrales del procesamiento
bull El cerebro no registra el mundo externo simplemente como una fotografiacutea tridimensional sino que construye una representacioacuten interna despueacutes de analizar sus componentes
El Factor Humano - GEInformagravetica IPO 15 110
Los canales de entrada Sistema visual
bull Ver es obtener informacioacuten a partir de la energiacutea electromagneacutetica que llega a los ojosbull De la estructura espacial del mundo que nos rodea y los distintos
aspectos que pueden distinguirse en eacutel
bull La luz es la porcioacuten del espectro electromagneacutetico que puede ser detectado por el sistema visual humano
El Factor Humano - GEInformagravetica IPO 16 110
El sistema visual y la IPO
bull Sensacioacutenbull Es la captacioacuten del estiacutemulo fiacutesico y su transformacioacuten en
impulso nervioso
bull Percepcioacutenbull Asignacioacuten de significado al estiacutemulo que ha entrado en nuestro
sistema cognitivo
bull En el nivel sensorio visual hablaremos de color e iluminacioacuten
bull Las personas trabajamos en un ambiente luminoso que influye en como se ve la informacioacuten presentada en la interfaz
El Factor Humano - GEInformagravetica IPO 17 110
El sistema visual
bull 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 Factor Humano - GEInformagravetica IPO 18 110
El sistema visual Limitations
bull Three presentation factors affect our ability to distinguish colors from each other
bull Paleness The paler (less saturated) two colors are the harder it is to tell them apart
bull Color patch size The smaller or thinner objects are the harder it is to distinguish their colors bull Text is often thin so the exact color of text
is often hard to determine
bull 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 Factor Humano - GEInformagravetica IPO 19 110
El sistema visual Limitations
El Factor Humano - GEInformagravetica IPO 20 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 13 110
Sistemas sensoriales
bull En la transmisioacuten de informacioacuten del ordenador a la persona hemos de considerar los sistemas sensoriales humanos
Entradabull Percepcioacuten a traveacutes de los
sentidosbull Vistabull Oiacutedobull Tactobull Gustobull Olfato
Salidabull Acciones a traveacutes de los
actuadores (efectores)bull Extremidadesbull Miembrosbull Dedosbull Ojosbull Cabezabull Sistema vocal
El Factor Humano - GEInformagravetica IPO 14 110
Sensacioacuten Los canales de entrada
bull El conocimiento del mundo lo construimos con la vista oiacutedo tacto dolor sensacioacuten de movimientos corporales
bull La percepcioacuten comienza en las ceacutelulas receptoras que son sensibles a uno u otro tipo de estiacutemulos
bull Las viacuteas sensoriales conectan al receptor perifeacuterico con las estructuras centrales del procesamiento
bull El cerebro no registra el mundo externo simplemente como una fotografiacutea tridimensional sino que construye una representacioacuten interna despueacutes de analizar sus componentes
El Factor Humano - GEInformagravetica IPO 15 110
Los canales de entrada Sistema visual
bull Ver es obtener informacioacuten a partir de la energiacutea electromagneacutetica que llega a los ojosbull De la estructura espacial del mundo que nos rodea y los distintos
aspectos que pueden distinguirse en eacutel
bull La luz es la porcioacuten del espectro electromagneacutetico que puede ser detectado por el sistema visual humano
El Factor Humano - GEInformagravetica IPO 16 110
El sistema visual y la IPO
bull Sensacioacutenbull Es la captacioacuten del estiacutemulo fiacutesico y su transformacioacuten en
impulso nervioso
bull Percepcioacutenbull Asignacioacuten de significado al estiacutemulo que ha entrado en nuestro
sistema cognitivo
bull En el nivel sensorio visual hablaremos de color e iluminacioacuten
bull Las personas trabajamos en un ambiente luminoso que influye en como se ve la informacioacuten presentada en la interfaz
El Factor Humano - GEInformagravetica IPO 17 110
El sistema visual
bull 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 Factor Humano - GEInformagravetica IPO 18 110
El sistema visual Limitations
bull Three presentation factors affect our ability to distinguish colors from each other
bull Paleness The paler (less saturated) two colors are the harder it is to tell them apart
bull Color patch size The smaller or thinner objects are the harder it is to distinguish their colors bull Text is often thin so the exact color of text
is often hard to determine
bull 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 Factor Humano - GEInformagravetica IPO 19 110
El sistema visual Limitations
El Factor Humano - GEInformagravetica IPO 20 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Sistemas sensoriales
bull En la transmisioacuten de informacioacuten del ordenador a la persona hemos de considerar los sistemas sensoriales humanos
Entradabull Percepcioacuten a traveacutes de los
sentidosbull Vistabull Oiacutedobull Tactobull Gustobull Olfato
Salidabull Acciones a traveacutes de los
actuadores (efectores)bull Extremidadesbull Miembrosbull Dedosbull Ojosbull Cabezabull Sistema vocal
El Factor Humano - GEInformagravetica IPO 14 110
Sensacioacuten Los canales de entrada
bull El conocimiento del mundo lo construimos con la vista oiacutedo tacto dolor sensacioacuten de movimientos corporales
bull La percepcioacuten comienza en las ceacutelulas receptoras que son sensibles a uno u otro tipo de estiacutemulos
bull Las viacuteas sensoriales conectan al receptor perifeacuterico con las estructuras centrales del procesamiento
bull El cerebro no registra el mundo externo simplemente como una fotografiacutea tridimensional sino que construye una representacioacuten interna despueacutes de analizar sus componentes
El Factor Humano - GEInformagravetica IPO 15 110
Los canales de entrada Sistema visual
bull Ver es obtener informacioacuten a partir de la energiacutea electromagneacutetica que llega a los ojosbull De la estructura espacial del mundo que nos rodea y los distintos
aspectos que pueden distinguirse en eacutel
bull La luz es la porcioacuten del espectro electromagneacutetico que puede ser detectado por el sistema visual humano
El Factor Humano - GEInformagravetica IPO 16 110
El sistema visual y la IPO
bull Sensacioacutenbull Es la captacioacuten del estiacutemulo fiacutesico y su transformacioacuten en
impulso nervioso
bull Percepcioacutenbull Asignacioacuten de significado al estiacutemulo que ha entrado en nuestro
sistema cognitivo
bull En el nivel sensorio visual hablaremos de color e iluminacioacuten
bull Las personas trabajamos en un ambiente luminoso que influye en como se ve la informacioacuten presentada en la interfaz
El Factor Humano - GEInformagravetica IPO 17 110
El sistema visual
bull 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 Factor Humano - GEInformagravetica IPO 18 110
El sistema visual Limitations
bull Three presentation factors affect our ability to distinguish colors from each other
bull Paleness The paler (less saturated) two colors are the harder it is to tell them apart
bull Color patch size The smaller or thinner objects are the harder it is to distinguish their colors bull Text is often thin so the exact color of text
is often hard to determine
bull 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 Factor Humano - GEInformagravetica IPO 19 110
El sistema visual Limitations
El Factor Humano - GEInformagravetica IPO 20 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Sensacioacuten Los canales de entrada
bull El conocimiento del mundo lo construimos con la vista oiacutedo tacto dolor sensacioacuten de movimientos corporales
bull La percepcioacuten comienza en las ceacutelulas receptoras que son sensibles a uno u otro tipo de estiacutemulos
bull Las viacuteas sensoriales conectan al receptor perifeacuterico con las estructuras centrales del procesamiento
bull El cerebro no registra el mundo externo simplemente como una fotografiacutea tridimensional sino que construye una representacioacuten interna despueacutes de analizar sus componentes
El Factor Humano - GEInformagravetica IPO 15 110
Los canales de entrada Sistema visual
bull Ver es obtener informacioacuten a partir de la energiacutea electromagneacutetica que llega a los ojosbull De la estructura espacial del mundo que nos rodea y los distintos
aspectos que pueden distinguirse en eacutel
bull La luz es la porcioacuten del espectro electromagneacutetico que puede ser detectado por el sistema visual humano
El Factor Humano - GEInformagravetica IPO 16 110
El sistema visual y la IPO
bull Sensacioacutenbull Es la captacioacuten del estiacutemulo fiacutesico y su transformacioacuten en
impulso nervioso
bull Percepcioacutenbull Asignacioacuten de significado al estiacutemulo que ha entrado en nuestro
sistema cognitivo
bull En el nivel sensorio visual hablaremos de color e iluminacioacuten
bull Las personas trabajamos en un ambiente luminoso que influye en como se ve la informacioacuten presentada en la interfaz
El Factor Humano - GEInformagravetica IPO 17 110
El sistema visual
bull 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 Factor Humano - GEInformagravetica IPO 18 110
El sistema visual Limitations
bull Three presentation factors affect our ability to distinguish colors from each other
bull Paleness The paler (less saturated) two colors are the harder it is to tell them apart
bull Color patch size The smaller or thinner objects are the harder it is to distinguish their colors bull Text is often thin so the exact color of text
is often hard to determine
bull 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 Factor Humano - GEInformagravetica IPO 19 110
El sistema visual Limitations
El Factor Humano - GEInformagravetica IPO 20 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Los canales de entrada Sistema visual
bull Ver es obtener informacioacuten a partir de la energiacutea electromagneacutetica que llega a los ojosbull De la estructura espacial del mundo que nos rodea y los distintos
aspectos que pueden distinguirse en eacutel
bull La luz es la porcioacuten del espectro electromagneacutetico que puede ser detectado por el sistema visual humano
El Factor Humano - GEInformagravetica IPO 16 110
El sistema visual y la IPO
bull Sensacioacutenbull Es la captacioacuten del estiacutemulo fiacutesico y su transformacioacuten en
impulso nervioso
bull Percepcioacutenbull Asignacioacuten de significado al estiacutemulo que ha entrado en nuestro
sistema cognitivo
bull En el nivel sensorio visual hablaremos de color e iluminacioacuten
bull Las personas trabajamos en un ambiente luminoso que influye en como se ve la informacioacuten presentada en la interfaz
El Factor Humano - GEInformagravetica IPO 17 110
El sistema visual
bull 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 Factor Humano - GEInformagravetica IPO 18 110
El sistema visual Limitations
bull Three presentation factors affect our ability to distinguish colors from each other
bull Paleness The paler (less saturated) two colors are the harder it is to tell them apart
bull Color patch size The smaller or thinner objects are the harder it is to distinguish their colors bull Text is often thin so the exact color of text
is often hard to determine
bull 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 Factor Humano - GEInformagravetica IPO 19 110
El sistema visual Limitations
El Factor Humano - GEInformagravetica IPO 20 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
El sistema visual y la IPO
bull Sensacioacutenbull Es la captacioacuten del estiacutemulo fiacutesico y su transformacioacuten en
impulso nervioso
bull Percepcioacutenbull Asignacioacuten de significado al estiacutemulo que ha entrado en nuestro
sistema cognitivo
bull En el nivel sensorio visual hablaremos de color e iluminacioacuten
bull Las personas trabajamos en un ambiente luminoso que influye en como se ve la informacioacuten presentada en la interfaz
El Factor Humano - GEInformagravetica IPO 17 110
El sistema visual
bull 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 Factor Humano - GEInformagravetica IPO 18 110
El sistema visual Limitations
bull Three presentation factors affect our ability to distinguish colors from each other
bull Paleness The paler (less saturated) two colors are the harder it is to tell them apart
bull Color patch size The smaller or thinner objects are the harder it is to distinguish their colors bull Text is often thin so the exact color of text
is often hard to determine
bull 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 Factor Humano - GEInformagravetica IPO 19 110
El sistema visual Limitations
El Factor Humano - GEInformagravetica IPO 20 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
El sistema visual
bull 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 Factor Humano - GEInformagravetica IPO 18 110
El sistema visual Limitations
bull Three presentation factors affect our ability to distinguish colors from each other
bull Paleness The paler (less saturated) two colors are the harder it is to tell them apart
bull Color patch size The smaller or thinner objects are the harder it is to distinguish their colors bull Text is often thin so the exact color of text
is often hard to determine
bull 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 Factor Humano - GEInformagravetica IPO 19 110
El sistema visual Limitations
El Factor Humano - GEInformagravetica IPO 20 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
El sistema visual Limitations
bull Three presentation factors affect our ability to distinguish colors from each other
bull Paleness The paler (less saturated) two colors are the harder it is to tell them apart
bull Color patch size The smaller or thinner objects are the harder it is to distinguish their colors bull Text is often thin so the exact color of text
is often hard to determine
bull 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 Factor Humano - GEInformagravetica IPO 19 110
El sistema visual Limitations
El Factor Humano - GEInformagravetica IPO 20 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
El sistema visual Limitations
El Factor Humano - GEInformagravetica IPO 20 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
El sistema visual Limitations
bull Color-blindness ne inability to see colors bull One or more of the color subtraction channels donrsquot
function normally making it difficult to distinguish certain pairs of colors
bull The most common type of colorblindness is redgreen
bull Others bull dark red from blackbull blue from purplebull light green from white
httpwwwdasplanktondeContrastA
El Factor Humano - GEInformagravetica IPO 21 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
El sistema visual External factors
bull External factors that influence the abolity to distinguish colorsbull Variation among color displaysbull Grayscale displaysbull Display anglebull Ambient illumination
bull These external factors are usually out of the software designerrsquos control
bull BUT designers should keep in mind and follow some recommendations (see next slide)
El Factor Humano - GEInformagravetica IPO 22 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
El sistema visual Recomendations (guidelines)
bull Distinguish colors by saturation and brightness as well as hue
bull Use distinctive colors
bull Avoid color pairs that color-blind people cannot distinguish
bull Use color redundantly with other cuesbull Color + a symbol better
bull Separate strong opponent colors
bull 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
El Factor Humano - GEInformagravetica IPO 23 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
El sistema visual Recomendations (guidelines) Example
NOBad color combination (text against background) worsened by the size of text
SI
El Factor Humano - GEInformagravetica IPO 24 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
El sistema visual Recomendations (guidelines) BAD Example
El Factor Humano - GEInformagravetica IPO 25 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
El sistema visual Interpretation of colours
bull What colours come to mind when you think of bull a Success message bull doing something wrong
I actually thought I made an error somehow (without reading the message ndash my bad) then went back and repeated the task before I realized I was being told I
had successfully completed the task In
lsquowarning redlsquohttpspyrestudioscomthe-user-experience-and-psychology-of-colour
El Factor Humano - GEInformagravetica IPO 26 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
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
El Factor Humano - GEInformagravetica IPO 27 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
httpwwwinteraction-designorgmembersimagelibraryzoomhtmlg=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9jb2xvcmVtb3Rpb25ndWlkZTIuanBn
El Factor Humano - GEInformagravetica IPO 28 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
El sistema visual Fovea vs peripherybull The spatial resolution of the human visual field
drops greatly from the center to the edges
bull Special consideration when locating feedback messages in the interfacesbull Ex Error messages
El Factor Humano - GEInformagravetica IPO 29 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
El sistema visual Fovea vs periphery
El Factor Humano - GEInformagravetica IPO 30 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
El sistema visual Fovea vs periphery
bull Recomendations for making message visiblebull Put it where users are looking
bull When people click a button or link designers can assume users to be looking directly at it (at least for a few moments afterward)
bull Use this predictability to position error messages near where they expect users to be looking
bull Mark the errorbull Use an error symbol
bull Reserve red color for errorsbull In our society red connotes alert danger problem error bull CARE Chinese consider red is a auspicious or positive color
El Factor Humano - GEInformagravetica IPO 31 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
El sistema visual Fovea vs periphery
bull STRONGER METHODS for making message visiblebull Use pop-up message in error dialog boxbull Use sound
bull When a computer beeps that tells its user something has happened that requires attention
bull Use wiggling or flashing messages briefly when they want to ensure that users see them
Use all of these ldquoheavy artilleryrdquo methods sparingly only for critical messages
El Factor Humano - GEInformagravetica IPO 32 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Sistema auditivo
bull La audicioacuten es crucial para la comunicacioacuten humana
bull Nuacutecleo de interacciones sociales y transmisioacuten del conocimiento
bull Existen menuacutes auditivos
bull IPObull Estudiar las interfaces auditivas y las multimodales
El Factor Humano - GEInformagravetica IPO 33 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
ARA 23-3-14httpwwwaracatpremiumsuplementsemprenemCotxes-internet-matrimoni-dificil_0_1106889316html
El Factor Humano - GEInformagravetica IPO 34 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
SO SYNC Microsoft + FordSO CarPlay Apple + VolvoSO Android Auto Google + multimarca
Use voice commands steering wheel buttons or touch screen
httpmashablecom20150320googles-android-auto
El Factor Humano - GEInformagravetica IPO 35 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
El tacto
bull iquestPor queacute nos hemos de preocuparbull Vital en dispositivos TAacuteCTILES (coacutemo los moacuteviles)bull Es un canal sensitivo importantiacutesimo en el disentildeo de sistemas de realidad virtualbull El usuario explora mundos virtuales con las manos
bull Clases de receptoresbull La piel es nuestro sistema sensorial maacutes grande
bull Termoreceptores Temperaturabull Nocireceptores Estiacutemulos dolorososbull Mecanoreceptores Presioacuten
bull Sentidos que detectan acciones del cuerpo
bull El Sentido cinesceacuteticobull Proporciona informacioacuten sobre lo que ocurre en la superficie y el interior del cuerpo bull Incluye sensaciones que provienen de la posicioacuten y el movimiento de las partes corporalesbull Es un sentido somaacutetico (articulaciones y huesos)
bull El sentido vestibularbull Proporciona informacioacuten acerca de la orientacioacuten el movimiento la aceleracioacutenbull Funciones
bull Equilibriobull Mantenimiento de la cabeza en posicioacuten erguidabull Ajuste de los movimientos de los ojos para compensar los movimientos de la cabeza
El Factor Humano - GEInformagravetica IPO 36 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Dolor
bull Dos componentes importantesbull Componente sensorialbull Componente emocional
bull Umbral del dolorbull La menor intensidad de estimulacioacuten a la cual percibimos dolor
bull Tiene un papel constructivo
El Factor Humano - GEInformagravetica IPO 37 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Temperatura
bull Es posible identificar puntos separados para el friacuteo y el calor en nuestra piel
bull Los umbrales de temperatura estaacuten influidos por factores como la parte del cuerpo la cantidad de piel expuesta y la velocidad de cambio de la temperatura
bull Con la exposicioacuten repetida se produce una adaptacioacuten teacutermica en la que disminuye la intensidad percibida
bull Las personas no localizan bien la temperatura ni la miden con precisioacuten
El Factor Humano - GEInformagravetica IPO 38 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
El Olfato
bull Realidad virtualbull Posibilidad que ofrecen los olores
para crear mundos virtuales parecidos a los reales
bull Interfaces emocionalesbull Tiene conexiones nerviosas directas
con el sistema liacutembico el encargado de procesar las emociones
bull Adaptacioacutenbull Si los receptores son expuestos durante mucho tiempo a un mismo olor pierden selectivamente la sensibilidad a ese olor
bull Gran variacioacuten individualbull En la sensibilidad al olor lo que hace que sea difiacutecil disentildear interfaces olfativas para que sean usadas universalmente
httpwwwgooglecomnose
Irreal ahora pero futurible
httpwwwmicro-scentnetindexhtml
Olfactory Interfaces
httpsaugmentedbodywordpresscom20101105olfactory-interfaces
El Factor Humano - GEInformagravetica IPO 39 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
httpsensoreecomsmell-interfaces
Human Olfactory Displays and Interfaces Odor Sensing and PresentationTakamichi NakamotoTokyo Institute of Technology (Japan)
httpsgigaomcom20130413how-technology-is-slowly-developing-its-sense-of-smell
El Factor Humano - GEInformagravetica IPO 40 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Perception
bull 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
bull Our expectations mdashand therefore our perceptionsmdash are biased by three factorsbull the past our experiencebull the present the current contextbull the future our goals
El Factor Humano - GEInformagravetica IPO 41 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Perception
bull (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
bull BUT experience can also bias other types of perception such as sentence comprehension Multipage dialog box
The ldquoNextrdquo button is perceived to be in a consistent location even when it isnrsquot
Biased by the pastour experience
El Factor Humano - GEInformagravetica IPO 42 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Perception
bull Users of computer software and Web sites often click buttons or links without looking carefully at them
bull 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
bull This sometimes confounds software designers who expect users to see what is on the screen But that isnrsquot how perception worksbull Ex previous ldquoNextrdquo amp ldquoBackrdquo buttons hellip many people would not immediately notice the
switch on the last ldquopagerdquobull Even after unintentionally going backward a few times they might continue to perceive
the buttons in their standard locations
bull This is why ldquoplace controls consistentlyrdquo is a common user interface design guideline
bull Experience tunes us to look for expected features in expected locations
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 43 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Perception
bull Text Linksbull 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 donrsquot have a particular reason to prefer another color we still recommend blue as the safest choice
hellipbull The position of links can help you
determine whether or not underlining is necessary
bull Static items should not have the same color as hyperlinks
bull Donrsquot use blue text (or underline text) for nonclickable items
bull Apply the same treatment consistently throughout your site
Biased by the past our experience
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 mdasha sure sign of design fail
Beyond Blue Links Making Clickable Elements Recognizable by Hoa Loranger on March 8 2015 httpgoogl79Y4E0
El Factor Humano - GEInformagravetica IPO 44 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull 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
bull The campus consists of a row of five buildings the last two with T-shaped courtyards providing light for the cafeteria and fitness center
bull 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
El Factor Humano - GEInformagravetica IPO 45 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Perception
bull PERCEPTION BIASED BY EXPERIENCEbull Now imagine that you are meeting with an advertising manager bull You are discussing a new billboard ad to be placed in certain
markets around the country bull 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
bull In this scenario you see a word clearly and unambiguously
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 46 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Visual Perception
bull Visual perception mdashreading in particularmdash is not strictly a bottom-up process It includes top-down influences too
bull bottom-up process combining basic features such as edges lines angles curves and patterns into figures and ultimately into meaningful objects
bull Example the word in which a character appears may affect how we identify the character
Biased by the past our experience
El Factor Humano - GEInformagravetica IPO 47 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Visual Perception
bull Our overall comprehension of a sentence or of a paragraph can even influence what words we see in it
bull Example the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph
Fold napkins Polish silverware Wash dishesFrench napkins Polish silverware German dishes
Biased by the present the current context
El Factor Humano - GEInformagravetica IPO 48 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Visual Perception
El Factor Humano - GEInformagravetica IPO 49 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Perception
bull The biasing of perception by the surrounding context works between different senses too
bull Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses
bull For examplebull What we see can be biased by what we are hearing and vice
versabull What we feel with our tactile sense can be biased by what we are
hearing seeing or smelling
El Factor Humano - GEInformagravetica IPO 50 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Perception
bull PERCEPTION BIASED BY GOALSbull In addition to being biased by our past experience and the present context our perception is influenced by our goals and plans for the futurebull our goals filter our perceptionsbull For example when navigating through software or a
Web site seeking information or a specific function people donrsquot read carefully They scan screens quickly and superficially for items that seem related to their goal They donrsquot simply ignore items unrelated to their goals they often donrsquot even notice them
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 51 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Perception
bull PERCEPTION BIASED BY GOALSExcercise 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
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 52 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Perception
bull PERCEPTION BIASED BY GOALSbull This filtering of perception by our goals is particularly true for adults who tend to be more focused on goals than children are
bull Children are more stimulus driven their perception is less filtered by their goals thenbull Children are more distractible than adults but bull it also makes them less biased as observers
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 53 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Perception
bull Perceptual filtering can also be seen in how people navigate Web sites
Enhorabona La teva entrada a la web seragrave recompensada amb
un premi de 100euroPassa per secretaria de direccioacute
per recollir-lo
Look for the departments structure of EPS
Have you seen that you won 100euro
NOBecause it was not related to your goal
Biased by the future our goals
El Factor Humano - GEInformagravetica IPO 54 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Perception
bull What is the mechanism by which our current goals bias our perception There are two
bull Influencing where we look bull Perception is active not passive bull We constantly move our eyes ears hands and so onbull We more or less ignore anything unrelated to our goal
bull Sensitizing our perceptual system to certain features bull When we are looking for something our brain can prime our perception
to be especially sensitive to features of what we are looking for
El Factor Humano - GEInformagravetica IPO 55 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Perception DESIGN IMPLICATIONS
1 Avoid ambiguitybull Avoid ambiguous information displaysbull Test your design to verify that all users interpret the display in the same waybull Where ambiguity is unavoidable
bull rely on standards or conventions to resolve it or bull prime users to resolve the ambiguity in the intended way
2 Be consistentbull Place information and controls in consistent locations
bull 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
bull They should also have the same color text fonts shading and so on
3 Understand the goalsbull Users come to a system with goals they want to achieve bull Designers should understand those goals
UserCentredDesign
El Factor Humano - GEInformagravetica IPO 56 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Human vision is holistic bull 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 perceptionhttpwwwscholarpediaorgarticleGestalt_principleshttpenwikipediaorgwikiGestalt_psychologyhttpwwwslidesharenetchelscgestalt-laws-and-design-presentation
bull Todayrsquos theories of visual perception tend to be based heavily on the neurophysiology of the eyes optic nerve and brain
bull BUT Gestalt principles are still validbull at least as a framework for describing visual perception explanationsbull Also provides useful basis for guidelines for graphic and UI design
El Factor Humano - GEInformagravetica IPO 57 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
bull Similarity mdash Similar objects are often perceived as a groupbull Continuation mdash Continuation occurs when the human eyes
follow the direction from one object to another perceiving separate objects as one
bull Closure mdash When gaps appear between shapes people tend to mentally close those gaps and form a perception of a whole object
bull Proximity mdash Objects placed close together are often perceived as a group
bull Figure and Ground mdash Different shapes that are formed by the foreground (figure) and background (ground)
httpyusylviawordpresscomtaggestalt
El Factor Humano - GEInformagravetica IPO 58 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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
El Factor Humano - GEInformagravetica IPO 59 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Proximity
poorly spaced radiobuttons look grouped in vertical columns
El Factor Humano - GEInformagravetica IPO 60 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull 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 theOrientation settings
El Factor Humano - GEInformagravetica IPO 61 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull SimilarityOnline form at Elseviercom
- 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
El Factor Humano - GEInformagravetica IPO 62 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Continuitybull 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
El Factor Humano - GEInformagravetica IPO 63 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Clousurebull related to Continuitybull our visual system automatically tries to close open figures so that
they are perceived as whole objects rather than separate pieces
El Factor Humano - GEInformagravetica IPO 64 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull FigureGroundbull 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 ldquobehindrdquo the primary displayed content
It is also often used to pop up information over other content Content that was formerly the figure mdashthe focus of the usersrsquo attentionmdash temporarily becomes the background for new information which appears briefly as the new
El Factor Humano - GEInformagravetica IPO 65 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure FigureGround
El Factor Humano - GEInformagravetica IPO 66 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull Simetry and order Symmetry gives us a feeling of solidity and order which we tend to seek Itrsquos our nature to impose order on chaos
The human visual system tries to resolve complex scenes into combinations of simple symmetrical shapes
El Factor Humano - GEInformagravetica IPO 67 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
More Gestalt PrinciplesHuman Vision is OPTIMIZED to See Structure
bull previous Gestalt principles concerned perception of static (un-moving) figures and objects
bull Common Fate concerns moving objectsbull It is related to the Proximity
and Similarity principles Like them it affects whether we perceive objects as grouped
bull Objects that move together are perceived as grouped or related
El Factor Humano - GEInformagravetica IPO 68 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Gestalt Principles Human Vision is OPTIMIZED to See Structure
bull Of course in real-world visual scenes the Gestalt principles work in concert not in isolation
bull Recommendationbull 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
El Factor Humano - GEInformagravetica IPO 69 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Perceiving Structure
bull 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
El Factor Humano - GEInformagravetica IPO 70 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Perceiving Structure
bull Structure also enhances peoplersquos ability to scan long numbersbull Segmenting data fields can provide useful visual structure even
when the data to be entered is not strictly speaking a number
Easy (415) 123-4567Hard 4151234567
Easy 1234 5678 9012 3456Hard 1234567890123456
Segmented data fields provide useful structure
El Factor Humano - GEInformagravetica IPO 71 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Perceiving Structure
bull Visual hierarchy lets people focus on the relevant information
Visual hierarchy is equally important in interactive control panels and forms -perhaps even more so
El Factor Humano - GEInformagravetica IPO 72 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Perception READING
bull Speaking and undestanding spoken language is a NATURAL human ability Reading IS NOT
bull Learning to read involves training our brain (amp our visual system) to recognize patternsReading involves recognizing features and patterns
bull Feature-driven (bottom-up or context-free) readingbull The brainrsquos ability to recognize basic features (lines edges angles etc) is built in and
therefore automatic from birth bull Recognition of morphemes words and phrases has to be learned
bull Context-driven (top-down) reading bull The visual system starts by recognizing high-level patterns (words phrases and sentences)
or by knowing the textrsquos meaning in advance bull It then uses that knowledge to figure out (or guess) what the components of the high-level
pattern must be
hellip Context [is] important but itrsquos a more important aid for the poorer reader who doesnrsquot have automatic context-free recognition instantiated
El Factor Humano - GEInformagravetica IPO 73 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
4QU357 M15547G3 53RV31X P3R 4 PR0V4R QU3 L4 N057R4 M3N7 35 F4N74571C4 1 P07 F3R C0535 M3R4V3LL0535 1MPR35510N4N7S 4L C0M3NCcedil4M3N7 P0753R 37 C0574 P3R0 4R4 L4 73V4 M3N7 LL3G31X 4U70M471C4M3N7 53N53 74N 50L5 P3N54R-H1 N0M35 UN5 QU4N75 P0D3N LL3G1R 41X0
3NG4NX4-H0 4L 73U MUR S1 H0 P075 LL3G1R
Perception READING pattern recognition (top-down processing)
bull Can you read this text (in catalan)
bull Or these
THE WORK MUST GET DONE WORK
THE WORK MUST GET DONE WORK
El Factor Humano - GEInformagravetica IPO 74 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Perception READINGbull Careful with geek terminology (especially in system or error
messages)
bull with difficult scripts amp typefaces
bull 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
Humanndashcomputer 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
HUMANndashCOMPUTER 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
El Factor Humano - GEInformagravetica IPO 75 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 76 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Memoria sensorial
bull La informacioacuten llega a nuestros sentidos de una forma continua y muy raacutepida
bull Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su funcioacuten y puede ocurrir que la pierdan antes de almacenarla
bull Por esta razoacuten los canales sensoriales tienen asociados memorias donde la informacioacuten se almacena por cortos periacuteodos de tiempo (mileacutesimas de segundo)
bull La funcioacuten de estas memorias es retener la informacioacuten para que pueda ser transferida a la Memoria de Trabajo antes de que desaparezca
El Factor Humano - GEInformagravetica IPO 77 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Memoria sensorial
bull Actuacutea como buffer de los estiacutemulos recibidos a traveacutes de los sentidos
bull Existe una memoria para cada canal y se actualizan constantemente
bull La informacioacuten se almacena durante periodos muy cortosbull Este almacenamiento nos permite predecir la procedencia del sonido (se
percibe por cada oiacutedo con un cierto desfase) o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estiacutemulo)
bull Existen tantas Memorias sensoriales como sentidos tenemos
bull Sin embargo las que mejor conocemos actualmente sonbull Memoria Icoacutenica ligada al canal visualbull Memoria Ecoica ligada al canal auditivo
El Factor Humano - GEInformagravetica IPO 78 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Memoria sensorial Almacenes
bull Icoacutenicobull Recibe la informacioacuten visualbull La informacioacuten que se recibe es de caraacutecter perceptual y no
categorialbull Permite mantener 9 elementos durante aprox 250 msegbull Se transfieren los elementos a los que el usuario preste
atencioacuten
bull Ecoicobull Almacena los estiacutemulos auditivosbull Almacenamiento de
bull Sonidos individuales durante 250 msegbull Palabras con significado durante 2 o maacutes segundos
El Factor Humano - GEInformagravetica IPO 79 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 80 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Short-term memory is not a store mdashit is not a place where memories and perceptions go to be worked on
bull It is not a temporary repository for information just brought in from the sensory system or retrieved from long-term memory
bull Instead short-term memory is a combination of phenomena arising from perception and attention
bull Each of our perceptual senses has its own very brief short-term ldquomemoryrdquo that is the result of residual neural activity after a perceptual stimulus
El Factor Humano - GEInformagravetica IPO 81 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull STM is equal to the focus of our attention Whatever is in that focus is what we are conscious of at any momentbull Right now you are conscious of the last few words and ideas
yoursquove read but probably not the color of the wall in front of you bull But now that Irsquove shifted your attention you are conscious of the
wallrsquos color and may have forgotten some of the ideas you read on the previous page
bull The primary characteristics of STM are its low capacity and its volatility
El Factor Humano - GEInformagravetica IPO 82 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull Designing a menuacute (web phone )bull How many options should havebull A few But how many options is ldquofewrdquo
bull The magical number 7plusmn2 Millerbull Tiempo de acceso 70 msegbull Tiempo en la memoria 20 seg
bull 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 httpuxmagcomarticlesthe-psychologists-view-of-ux-designgoback=2Egde_72842_member_213335291
El Factor Humano - GEInformagravetica IPO 83 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull La carga de informacioacuten en STM y la probabilidad de un fallo en la recuperacioacuten de informacioacuten almacenada en ella dependen de las demandas de almacenamiento y del procesamiento de las tareas
bull Los menuacutes profundos y estrechos demandan maacutes capacidad de procesamientobull En ellos una opcioacuten en el nivel superior de la
estructura de menuacutes estaacute poco relacionada con la descripcioacuten de la tarea generando mayor demanda de procesamiento
bull El usuario necesita recorrer un mayor camino para encontrar la opcioacuten que necesita
El Factor Humano - GEInformagravetica IPO 84 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
bull En teacuterminos de almacenamiento y procesamiento en la interaccioacuten con los menuacutes telefoacutenicos se generan grandes demandas de STM por tres razones1 E
2 El ritmo de presentacioacuten de las opciones es marcado por la interfaz y no por eacutel Este ritmo genera una presioacuten temporal que incrementa las demandas de procesamiento en MT
3 No existen ayudas externas como ocurre en los menuacutes visuales
El usuario debe monitorizar el estado de un ambiente estimular en constante cambio (la presentacioacuten de las opciones de cada menuacute) El usuario debe notar los cambios en ese ambiente porque eso le permite la evaluacioacuten de las alternativas para la eleccioacuten de las siguientes opciones y porque esos cambios le dan un feedback sobre la eficacia de las opciones ya elegidas
El Factor Humano - GEInformagravetica IPO 85 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (STM)
UI DESIGN implicationsbull The capacity and volatility of short-term memory have
many implications for the design of interactive computer systems
bull UI should help people remember essential information from one moment to the next
bull Donrsquot require people to remember system status or what they have done because their attention is focused on their primary goal and progress toward itThere are two things that every designed screen must do well describe the current step and describe the next step Itrsquos as simplehellipand hardhellipas that
httpbokardocomarchivesdesigning-for-the-next-step
El Factor Humano - GEInformagravetica IPO 86 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
POBLACIOacute 2
POBLACIOacute 1
El Factor Humano - GEInformagravetica IPO 87 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
UI DESIGN implications
bull Regular dropdown menus in large multi-level sites typically hide some or many of the options from the userbull This requires them to
scroll search or remember where particular options are within the user interface bull more interactively
demanding (ie more clicking is required)
bull more cognitively demanding (ie recall from short-term memory is required) Mega Dropdown menu (Fat menu)
httpwwwnngroupcomarticlesmega-menus-work-well
El Factor Humano - GEInformagravetica IPO 88 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Modelo procesamiento humano
El Factor Humano - GEInformagravetica IPO 90 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull It actually is a MEMORY STOREbull the capacity of human long-term memory seems almost unlimited
bull weaknesses bull error-prone bull impressionist (weighted by emotions) bull free-associativebull idiosyncratic (muy personal) bull retroactively alterablebull 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
teacherrsquos name Second grade Third grade hellip
- What Web site was presented earlier that show hellip
- An exam- hellip
El Factor Humano - GEInformagravetica IPO 91 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull The main thing that the characteristics of long-term memory imply is that people need tools to augment it
bull Humankind has a need for technologies that augment memorybull software designers should try to provide software that fulfills
that need bull designers should avoid developing systems that burden
longterm memorybull Familiar paths (patterns)
bull well-learned routes can be done fairly automatically and does not consume attention and short-term memory
bull They are stored in LTM
El Factor Humano - GEInformagravetica IPO 92 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
This kind of registration burdens long-term memory users may have no unique memorable answer for any of the questions
El Factor Humano - GEInformagravetica IPO 93 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition is easy Recall is hard
bull Recognition is essentially perception + LTM working in concertbull 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
bull Recall is LTM reactivating (old) neural patterns without immediate similar perceptual input Much harder than reactivating a neural pattern with the same or similar perceptionsbull Our brain did not evolve to recall facts humans develop methods and
technologies to help them remember facts and proceduresbull Ex a sheet of paper or a power point presentation usually is a recall resource
bull 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]
El Factor Humano - GEInformagravetica IPO 94 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
1 See and choose is easier than recall and type
ldquoRecognition rather than recallrdquo
one of Nielsen amp Molichrsquos
widely used heuristics for
evaluating UI
See amp choose
Remember amp type Cgt copy doc1 doc2Cgt remove fileA
See amp choose
El Factor Humano - GEInformagravetica IPO 95 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
UI DESIGN implicationsbull Recognition vs Recall golden rules
2 Use pictures where possible to convey function
El Factor Humano - GEInformagravetica IPO 96 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull La memoria de largo plazo almacena todo nuestro conocimiento
bull Las principales caracteriacutesticas son bull Gran capacidad (casi ilimitada) bull Acceso maacutes lento (110 s) bull Las peacuterdidas ocurren maacutes lentamente
bull Tiposbull Procedimentalbull Declarativa
El Factor Humano - GEInformagravetica IPO 97 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
bull Why bull most smart phones make a shutter sound when you close a
camera to take a picture bull when you read a book on a tablet seems that turning the pageslink to ldquothe pastrdquo
However increasingly some of the objects that serve as reference are disappearing from memory of users The younger generation of iPad users bull will there ever be operated analog clocks
calendars notebooks paper or yellow pages
bull In the near future how many of them have passed the pages of a real book
El Factor Humano - GEInformagravetica IPO 98 110
SoundJaycom Sound Effects
null
1392
SoundJaycom Sound Effects
0696
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
And be aware about
bull Our STM decreases with age
bull However we can draw on much more background knowledge in our LTM
Model Human ProcessorEl Factor Humano - GEInformagravetica IPO 99 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Affordance (captacioacuten intuitiva)
bull Las affordances son las funciones de un objeto que el observador percibe directamente a partir de su imagen
bull Una buena affordance atrae al usuario lo invita a interactuar con el sistema sin necesidad de consultar la ayuda
httpwwwgrihotoolsudlcatmpiuaaffordanceshttpenwikipediaorgwikiAffordance
Everyday designs ldquointuitivosrdquo manecilla para abrir la puerta del coche
El Factor Humano - GEInformagravetica IPO 100 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Affordance (captacioacuten intuitiva)
bull Requisitos para maximizar la efectividad de las affordances
bull Forma funcional bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar
ante un objeto ldquopara ser presionadordquo
bull Visibilidad al usuario bull Elementos como los ldquolinks emergentesrdquo que tan solo aparecen cuando el
usuario situacutea encima de los mismos el puntero del ratoacuten no son aconsejables en la medida en que no hacen visible su funcioacuten a primera vista
bull Accioacuten coherentebull Un botoacuten para acceder a un menuacute oculto que se identifique con una flecha
sentildealando abajo deberaacute presentar el menuacute desde ese punto y hacia abajo
bull Relatividad del observador un problema de las affordances es que no suscitan la misma funcioacuten a todo tipo de poblacioacuten bull un banco en un parque puede presentar el affordance ldquosentarse en eacutelrdquo para un
anciano y ldquoescalarlordquo para un nintildeo pequentildeo
El Factor Humano - GEInformagravetica IPO 101 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Affordance The Principle of Visibility
bull VISIBILITY is an important design principlebull if a user cannot see the means of achieving their goals they will
either bull waste time searching for them or bull simply seek alternative websites devices or designs that do not
impede their productivity in such a way
El Factor Humano - GEInformagravetica IPO 102 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Affordance (captacioacuten intuitiva)
bull un usuario al percibir un botoacuten la primera impresioacuten que tiene es la de estar ante un objeto ldquopara ser presionadordquo
El ciacuterculo tambieacuten da una aacuterea de acierto pero es menor y el usuario se suele apoyar en los contornos
Install Now
El cuadrado proporciona un aacuterea mayor de acierto para el usuario
buscar
Si no pintamos el aacuterea de acierto el usaurio tiene que apuntar muy bien para acertar el botoacuten
Install Now
El Factor Humano - GEInformagravetica IPO 103 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Confusing Affordance
bull Which one can or should be pressed
bull All three look like a button which means we can press on it
The fact is only the
middle one is a button
El Factor Humano - GEInformagravetica IPO 104 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Affordance amp graphic methafors (icons)
bull In the battle of clarity between icons and labels labels always win
httpbokardocomarchiveslabels-always-win
Progressive Reductionhttplayervaulttumblrcompost42361566927progressive-reduction
familiarity
El Factor Humano - GEInformagravetica IPO 105 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Affordance amp graphic methafors (icons)
bull Cuando enviamos un video por Whatsapp se muestra un cuadro del video con un widget en el centro que indica el progreso en el enviacuteo
bull El widget se compone debull un ciacuterculo que se muestra con un fondo negro transparente y bull una circunferencia en blanco que va completaacutendose conforme progresa el enviacuteo bull ademaacutes de un cuadrado plano que funciona como siacutembolo de stop
bull Cuando el video ha sido descargado bull el ciacuterculo cambia a un blanco transparente con un triaacutengulo que funciona como siacutembolo
de play bull Muy interesante la doble funcioacuten comunicativa conseguida en este disentildeo a
pesar de su simplezabull por un lado comunica el progreso en el enviacuteo por el otro refleja su affordance como botoacuten
Ademaacutes un usuario de Whatsapp sabraacute que algo salioacute mal en la descarga del viacutedeo si la circunferencia nunca se completa
El Factor Humano - GEInformagravetica IPO 106 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Non affordance Lack of Hover State on Touch Devices
bull On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not
bull Touch devices do not have the affordance for ldquoinstant indication if something is clickable or notrdquo
bull This proved a major problem during user testing of the mobile sites bull especially on complex navigation
heavy sites such as mobile commerce sites httpbaymardcomblogmobile-product-list-hit-areas
El Factor Humano - GEInformagravetica IPO 107 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Conclusiones
bull La persona percibe informacioacuten a traveacutes de los sentidosbull Vista oiacutedo tacto bull Guarda manipula y utiliza informacioacutenbull Reacciona a la informacioacuten recibida
bull Una comprensioacuten de les capacidades y limitaciones de las personas nos ayudaraacute en el disentildeo de las interfaces de los sistemas interactivos
10 things every designer should know about peoplehttpwwwuxforthemassescom10-things-every-designer-should-know-about-people
Lectura recomendada
El Factor Humano - GEInformagravetica IPO 108 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
Bibliografiacutea
bull Norman D A (2002) The Design of Everyday Things Basic Books bull Anderson JR (1995) Cognitive Psychology and its implications
NYbull Card SK Moran TP y Newell A (1983) The Psychology of
Human-Computer Interaction Lawrence Erlbaum Associatesbull Cantildeas JJ (2004) Personas y Maacutequinas El disentildeo de su
interaccioacuten desde la ergonomiacutea cognitivabull Miller GA (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 JohnsonMorgan Kaufmann (2010)
El Factor Humano - GEInformagravetica IPO 109 110
100 Things Every Designer Needs to Know About
People
Susan WeinschenkNew Riders (2011)
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110
El Curso de Interaccioacuten Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 40 Internacional License
El Factor Humano - GEInformagravetica IPO 110 110