Course3 Human web - Alan Dix€¦ · Gestalt theory of perception • In search for patterns (Gestalt = form) Unifying forms and configurations that the mind naturally creates, with

1

chapter 1

the human

the human

• Information i/o …

– visual, auditory, haptic, movement

• Information stored in memory

– sensory, short-term, long-term

• Information processed and applied

– problem solving

• Emotion influences human capabilities

• Each person is different

Overview• Visual perception

– Gestalt– Depth and size

– Colour and brightness– Visual illusions

– Reading

• Auditory perception• Haptic perception

• Movement• Attention

• Exercises• Final remarks

Limitations of poor interface design

• Any thoughts?

• Task learning: poor

• Task efficiency: poor

• Risk of accidents: high

• Training: costly

• Emotions: frustration, confusion,anxiety

Why do we need to understand users?

• Bad design contradicts facts pertaining to humancapabilities

– Usability problems

• Design process should place emphasis on the user

• To supply theories, guidance and methods thatcan lead to the design of better interactiveproducts

Perception

• Process of acquiring, interpreting, selecting, andorganizing sensory information.

• Visual perception - the ability to interpretvisible light information reaching the eyes which

is then made available for planning and action.

• Two stages in vision

• physical reception of stimulus

• processing and interpretation of stimulus

2

Visual perception – the eye

Rods

• Black –white vision

• Highly sensitive to light

• Edges of retina – peripheral vision

Cones

• Colour-vision– long-wavelength light (red)

– middle-wavelength light (green)

– short-wavelength light (blue)

• On the fovea 2mm diameter – clear vision

Ganglion cells

• X-cells – on fovea, early detection of patterns

• Y cells – distributed, early detection of movement

Optical centre

• The geometric centre:the intersection of thehorizontal axis andvertical axis.

• A powerful focal point.

• The optical centre isslightly above thegeometric centre.

• The centre to thehuman eye.

Optical centreGeometriccentre

Gestalt theory of perception

• In search for patterns (Gestalt = form)Unifying forms and configurations that themind naturally creates, with properties thatare inevitably greater than the sum of theirparts.

• Implications for design:understanding gestaltic organizing principlescan be of considerable aid when designing thelayout of visual information.

Gestalt Principles

http://web.cecs.pdx.edu/~palms/HCI/lectures/Week4.ppt

Gestalt Principles

• Proximity: objects that are close to each other tend to beseen as a group

• Similarity: objects of the same shape or color are seenas belonging together

• Continuity: lines tend to be seen as continuous, even ifthey are interrupted

• Closure: missing parts of an object are filled in tocomplete it, so that it appears as a whole.

• Area: the smaller of two overlapping figures is perceivedas figure while the larger is regarded as ground

• Symmetry: regions bounded by symmetrical borderstend to be perceived as coherent figures


Gestalt and Design

• Proximity

• Symmetry

• Similarity

• Closure

• Area

• Continuity

• Alignment

• Contrast

• Proximity

• Repetition


Use design principles for graphical simplification:

visual information should be detected NOT constructed!

3

Alignment


Choose one

Proximity


Group related items together

Proximity


Proximity


RepetitionRepeat some aspects throughout Repetition

4

Contrast

http://units.english.uiuc.edu/ppw/prosem/2003/carp/index.html

If two items are not exactly the same, then make them different

Bad design

No organizationNo use of

contrast,repetition, or

otherorganizing

principles

Slide: Saul Greenberg

Good design Two-level hierarchy• indentation

• contrast

Grouping bywhite space

Alignment

connectsvisual

elements ina sequence

Slide: Saul Greenberg

Why?

Specific types of visual perception

• Size perception

• Depth perception

• Brightness perception

• Colour perception

• Visual illusions – complexity andambiguity of visual perception

Size and depth perception

• visual angle indicates how much of view object

occupies

– relates to size and distance from eye

• size constancy

– familiar objects perceived as constant size

– in spite of changes in visual angle when far

away

• cues help perception of size and depth

Depth cues

Monocular clues

• Motion parallax

• Aerial Perspective

• Linear Perspective

• Relative size

• Occlusion

• Colour vision

Binocular clues

• Stereoscopy

5

Depth cues

Monocular clues

• Motion parallax



• Relative size

• Occlusion

• Colour vision

Binocular clues

• Stereoscopy

The apparentrelative motion ofstationary objectsagainst abackground whenthe observermoves.

Depth cues

Monocular clues

• Motion parallax



• Relative size

• Occlusion

• Colour vision

Binocular clues

• Stereoscopy

Due to thescattering of bluelight in theatmosphere,distance objectsappear more blue.

Arial Perspective Arial Perspective

Depth cues

Monocular clues

• Motion parallax



• Relative size

• Occlusion

• Colour vision

Binocular clues

• Stereoscopy

The property ofparallel linesconverging atinfinity.

Linear Perspective

6

Linear Perspective Depth cues

Monocular clues

• Motion parallax



• Relative size

• Occlusion

• Colour vision

Binocular clues

• Stereoscopy

The apparentretinal image sizeallow us to judgedistance based onour past andpresent experienceand familiarity withsimilar objects

Relative size Relative size

Depth cues

Monocular clues

• Motion parallax



• Relative size

• Occlusion

• Colour vision

Binocular clues

• Stereoscopy

The overlappedobject is consideredfurther away

Occlusion

7

Depth cues

Monocular clues

• Motion parallax



• Relative size

• Occlusion

• Colour vision

Binocular clues

• Stereoscopy

Correct interpretationof colour, andespecially lightingcues, allows us todetermine the shapeof objects

Lights and shades

Depth cues

Monocular clues

• Motion parallax



• Relative size

• Occlusion

• Colour vision

Binocular clues

• Stereoscopy

Three-dimensionalvision produced bythe fusion of twoslightly differentviews of a scene oneach retina

What depth cues we have here?


Arial perspective

Linearperspective

Relativesize &

Occlusion

Light &shades


8

Depth and Design

GUI - depth cues indicate importance/activity levelVE - depth cues are widely used

• Size:

– larger objects appear closer.• Interposition:

– overlapping objects appear closer.• Contrast, Clarity, Brightness, Texture:

– increasing any of these makes an object appear closer.• Shadow:

– generating a shadow of a foreground object and castingit on the background objects.

Brightness and colour perception

• Brightness– subjective reaction to levels of light

– affected by luminance of object (light emitted)

– visual acuity increases with luminance as does flicker

– where is flicker more noticeable?

• Colour– made up of hue (wavelength) intensity (brightness),

saturation (amount of whiteness)

– cones sensitive to colour wavelengths

• long-wavelength light (red)

• middle-wavelength light (green)

• short-wavelength light (blue)

– blue acuity is lowest

– 8% males and 1% females colour blind

Colour and Design

• Use colour as a redundant cue, e.g. hyperlink

– text and background are distinguishable basedon contrast & colour

– diagrams are distinguishable based on

contrast, line style and colour

• Good design rues for non colour blind users

– poor light conditions

– black and white printer

Colour and Design

blue-yellow colour deficit

red-green colour deficit

hcibook/e3 home page

Interpreting the signal

• The visual system compensates for:

– movement of the image on the retina

• Integration is performed through automaticinferences in visual cortex

• Context is used to resolve ambiguity

• Optical illusions sometimes occur due to overcompensation

Optical Illusions

the Ponzo illusion the Muller Lyer illusion

9

Optical Illusions

the Ponzo illusion the Muller Lyer illusion

Belvedere’s Toy by M.C. Escher

• columns start in the front

and end in the back

• upper floor is rotated 90

degrees from the lowerfloor

• a ladder climbs from the

inside of the building tothe outside, yet remains

climbable

What is wrong?

http://www.fink.com/papers/impossible.html

Reading –major role of visual perception

• Several stages:

– Perception of the visual pattern of the world

– decoded using internal representation of language

– interpreted using knowledge of syntax and

semantics

• Reading involves saccades and fixations

• Perception occurs during fixations

• Average: 250 words per min – shape recognition

Reading: visual perception problems

Dyslexia

Learning disability manifesting as a difficulty withwritten language, particularly with reading and spelling.

– confuse letters either when reading or when writing,i.e. b and d.

– reverse words in reading or writing, i.e. no for on, or pot for top.

• http://www.lancs.ac.uk/disabilities/dyslexiaguide.htm

• http://www.lancs.ac.uk/studentsupport/staff/disabilityteachingguide.htm

Reading and Design• Readability

– Font colour/brightness and the background

– Font size, 9, 12 pts.– Word shape is important to recognition

– Negative contrast– Size of the interline spacing

– Font type reflecting the content– Information organisation

– Language difficulty• Dyslexia

– Writing and presentation style: short and simplesentences, lines <=60-70 chars, line spacing betweenparagraphs, wide margins and headings, short paragraphs,left justify, bullet pts rather than continuous text

– Font: 14 point, lowercase, bold rather than underline oritalic, no hyphenation, avoid light text on dark background.

Other types of perception

• Auditory perception - hearing

• Haptic perception - touch

10

Auditory perception

• Provides information about environment:distances, directions, objects etc.

• Physical apparatus:– outer ear – protects inner and amplifies sound

– middle ear – transmits sound waves asvibrations to inner ear

– inner ear – chemical transmitters are releasedand cause impulses in auditory nerve

• Sound– pitch – sound frequency

– loudness – amplitude

– timbre – type or quality

Auditory perception

• Humans can hear frequencies from 20Hz to 15kHz– less accurate distinguishing high frequencies than low.

– more sensitive to changing patterns

• Loudness of between 20-70 decibels (dB)constitutes comfortable hearing.

– Loud band 160 dB

– Shouting 100 dB

– Conversation 50dB

– Whisper 20 dB

• Auditory system filters sounds– can attend to sounds over background noise, e.g. the

cocktail party phenomenon.

Auditory perception and Design• The remarkable amount of information conveyed by sound

could be more extensively used in interface design

• Audio feedback: warning, notification, affirmative feedback

• List 3 situations when sound is a useful means of attracting auser’s attention

• Attention: New sounds compete with existing environmentalsounds.

• Fatigue: Audio feedback should not become tired-soundingwhen we hear them often

• Emotion: Since sound is unavoidable it should also beinoffensive

• May be key sense for someone who is visually impaired

Haptic perception• Stimulus received via receptors in the skin:

– thermoreceptors – heat and cold– nociceptors – pain

– mechanoreceptors– pressure & vibrations - tactile sensing

• Stimulus received via receptors beneath the skin, in muscles,tendons, joints:

– kinaesthetic sensing - limb position and movement

- awareness of body position

- affects comfort and performance

• Some areas more sensitive than others e.g. fingers.

Haptic perception and Design

Intersensory integration

• Haptics favour material properties, e.g. surface: roughness,

slipperiness, warmth; substance: weight.

• Vision favours geometric properties, e.g. size (2-D, 3-D),shape, pointiness

• Vision and haptics can compensate each other: one sense canbe “fooled” by the other

- coarse visual textures make surfaces feel rougher;

– visual curves make haptic edges feel rounder

Haptic interface design

• May be key sense for someone who is visually impaired

Movement

• Time taken to respond to stimulus:

reaction time + movement time

• Movement time dependent on age, fitness etc.

• Reaction time - dependent on stimulus type:

– visual ~ 200ms

– auditory ~ 150 ms

– pain ~ 700ms

11

Movement and Design• Fitts' Law describes the time taken to hit a

screen target:

Mt = a + b log2(D/S + 1)

where: a and b are empirically determined constants

Mt is movement time

D is Distance

S is Size of target

targets as large as possibledistances as small as possible

• Targets at screen edge are easy to hit

• Linear popup menus vs pie menus

Attention

Cognitive process of selectively concentrating on one aspect

of the environment while ignoring other things

Focused attention

• ability to respond discretely to specific stimuli

• single “locus of attention

– pick one thing to focus on, amongst many possibilities

• eye movement to item of interest

• head movement to sounds of interest

• cocktail party effect: ability to “tune out” numerousconversations in same vicinity and focus on just one

Divided attention

• the highest level of attention and it refers to the abilityto respond simultaneously to multiple tasks or multipletask demands.

• quickly accesses several information sources, switch ofactivities or contexts

• limited number of attentional tokens (4-7) -fundamental bottleneck in human processing

• interference between tasks

– can degrade performance if combined tasks exceedhuman abilities

Attention and Design

Information overload makes attention a scarce resource

• Make the relevant information salient, e.g. colour,ordering, spacing, underlining, sequencing andanimation

• Avoid cluttering the interface, e.g. google.com simpledesign

• Shifting the computer from the foreground of the user'sattention to the background, e.g. ubicomp.

• Interruptions - strategies for coordinating interruptionsin HCI, e.g. immediate, negotiated, mediated, andscheduled.

Exercise 1 – where should buttonsand menus be placed on the screen?

At the edge of the screen

• Fitt’s law: faster move of the mouse to a target at the edge

– The boundary of the display acts as a visual bumper toquick motions.

– Finding a target in the middle of the screen requiresslowing down to keep from overshooting. This takesmore time, and uses mental energy inappropriately.

• Primary information should be located near the opticalcentre, with secondary information at the edges.

• For psychological continuity, orienting information shouldbe placed at the top or the bottom of the screen, dependingon whether it relates to the preceding or following screen,respectively.

http://www.math.duke.edu/education/ccp/resources/write/design/

Exercise 2: what is the best use of thecolour blue on the GUI, for backgroundor details?Blue is for background ... but not details.

• Fovea, where detailed vision occurs, has a lowsensitivity to the colour blue.

– it is very difficult, and very tiring, to distinguishdetails that are outlined in shades of pure blue.

– blue text, thin blue lines, and small blue thingsgenerally should be avoided.

• Blue makes an ideal background colour, however.

– registered by the rest of the retina, it provides anexcellent contrast to detailed central elements inanalogous or monochromatic shades.

http://www.math.duke.edu/education/ccp/resources/write/design/

12

Exercise3: what is the best use ofmotion in GUI?

Only for capturing and maintaining the user's

attention.

• Peripheral vision is more sensitive to motion

(e.g., animation and blinking) than is fovealvision

• Example of bad design: web pages with

animated ad banners.

Final remarks

• Psychology and the Design of InteractiveSystem

• A lot of knowledge has been distilled in:

– guidelines (chap 7)

– cognitive models (chap 12)

– experimental and analytic evaluationtechniques (chap 9)

• Correct application generally requires

understanding of context in psychology, andan understanding of particular experimental

conditions

Documents

Course3 Human web - Alan Dix€¦ · Gestalt theory of perception • In search for patterns (Gestalt = form) Unifying forms and configurations that the mind naturally creates, with