Download - 2. El Factor Humano

Transcript
Page 1: 2. El Factor Humano

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

  • El Factor Humano
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 2: 2. El Factor Humano

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

  • El Factor Humano
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 3: 2. El Factor Humano

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

  • El Factor Humano
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 4: 2. El Factor Humano

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

  • El Factor Humano
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 5: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 6: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 7: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 8: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 9: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 10: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 11: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 12: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 13: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 14: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 15: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 16: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 17: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 18: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 19: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 20: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 21: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 22: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 23: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 24: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 25: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 26: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 27: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 28: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 29: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 30: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 31: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 32: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 33: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 34: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 35: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 36: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 37: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 38: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 39: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 40: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 41: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 42: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 43: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 44: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 45: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 46: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 47: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 48: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 49: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 50: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 51: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 52: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 53: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 54: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 55: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 56: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 57: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 58: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 59: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 60: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 61: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 62: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 63: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 64: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 65: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 66: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 67: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 68: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 69: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 70: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 71: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 72: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 73: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 74: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 75: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 76: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 77: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 78: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 79: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 80: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 81: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 82: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 83: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 84: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 85: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 86: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 87: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 88: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 89: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 90: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 91: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 92: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 93: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 94: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 95: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 96: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 97: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 98: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 99: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 100: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 101: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 102: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 103: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 104: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 105: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 106: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 107: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 108: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110
Page 109: 2. El Factor Humano

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
  • Presentacioacuten
  • Objetivos
  • The Psychologistrsquos View of UX Design
  • Slide 5
  • Slide 6
  • Un modelo simple del procesamiento de informacioacuten
  • Psicologiacutea cognitiva
  • Slide 9
  • Actividades cognitivas de un usuario
  • Modelo procesamiento humano
  • Modelo procesamiento humano (2)
  • Modelo procesamiento humano (3)
  • Sistemas sensoriales
  • Sensacioacuten Los canales de entrada
  • Los canales de entrada Sistema visual
  • El sistema visual y la IPO
  • El sistema visual
  • El sistema visual Limitations
  • El sistema visual Limitations
  • El sistema visual Limitations (2)
  • El sistema visual External factors
  • El sistema visual Recomendations (guidelines)
  • El sistema visual Recomendations (guidelines) Example
  • El sistema visual Recomendations (guidelines) BAD Example
  • El sistema visual Interpretation of colours
  • El sistema visual Interpretation of colours (2)
  • Slide 28
  • El sistema visual Fovea vs periphery
  • El sistema visual Fovea vs periphery (2)
  • El sistema visual Fovea vs periphery (3)
  • El sistema visual Fovea vs periphery (4)
  • Sistema auditivo
  • Slide 34
  • Slide 35
  • El tacto
  • Dolor
  • Temperatura
  • El Olfato
  • Slide 40
  • Perception
  • Perception (2)
  • Perception (3)
  • Perception (4)
  • Perception (5)
  • Perception (6)
  • Visual Perception
  • Visual Perception (2)
  • Visual Perception (3)
  • Perception (7)
  • Perception (8)
  • Perception (9)
  • Perception (10)
  • Perception (11)
  • Perception (12)
  • Perception DESIGN IMPLICATIONS
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure
  • Slide 58
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (3)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (4)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (5)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (6)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (7)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (8)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (9)
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct
  • More Gestalt Principles Human Vision is OPTIMIZED to See Struct (2)
  • Gestalt Principles Human Vision is OPTIMIZED to See Structure (10)
  • Perceiving Structure
  • Perceiving Structure (2)
  • Perceiving Structure (3)
  • Perception READING
  • Perception READING pattern recognition (top-down processing)
  • Perception READING
  • Modelo procesamiento humano (4)
  • Memoria sensorial
  • Memoria sensorial (2)
  • Memoria sensorial Almacenes
  • Modelo procesamiento humano (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (2)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (3)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (4)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (5)
  • Memoria de Trabajo (MT) (Memoria Operativa) Short-Term Memory (6)
  • Slide 87
  • UI DESIGN implications
  • Modelo procesamiento humano (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (2)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (3)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (4)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (5)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (6)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (7)
  • Memoria de Largo Plazo (MLP) Long-Term Memory (LTM) (8)
  • And be aware about
  • Affordance (captacioacuten intuitiva)
  • Affordance (captacioacuten intuitiva) (2)
  • Affordance The Principle of Visibility
  • Affordance (captacioacuten intuitiva) (3)
  • Confusing Affordance
  • Affordance amp graphic methafors (icons)
  • Affordance amp graphic methafors (icons) (2)
  • Non affordance Lack of Hover State on Touch Devices
  • Conclusiones
  • Bibliografiacutea
  • Slide 110