HCIHCI

Cognitive Frameworks for HCICognitive Frameworks for HCI

Fall 2011

““Doing Work” View Doing Work” View • Need to understand the user and human Need to understand the user and human

behaviorbehavior

• How does an architect approach a How does an architect approach a custom home design for a new client?custom home design for a new client?

the humanthe human

the humanthe human

• Information i/o …Information i/o …- visual, auditory, haptic, movementvisual, auditory, haptic, movement

• Information stored in memoryInformation stored in memory- sensory, short-term, long-termsensory, short-term, long-term

• Information processed and appliedInformation processed and applied- reasoning, problem solving, skill, errorreasoning, problem solving, skill, error

• Each person is differentEach person is different

Modeling HumansModeling Humans

• For HCI, goals are primarily in “Computer” and “Interaction”- Utility of human model lies in how well it

helps with interfaces• Card, Moran, and Newell (1983)

Model Human Processor - “Classic” example of cognitive

architecture with focus on humans interacting with computers

- Each has own processor and memory

Student Name ServerUtah School of Computing slide slide 66

Cognitive models

They model aspects of user:

understanding

knowledge

intentions

processing

Common categorization:

Competence

Performance

Computational flavor

No clear divide

Model Human Processor - OriginalModel Human Processor - Original

9

The Model Human ProcessorThe Model Human Processor

The model human processor consists of three interacting systems. Each has its own memory and processor.

Perceptual processor • Outputs into audio storage • Outputs into visual storage

Cognitive processor • Outputs into working memory. • Has access to:

Working memoryLong term memory

Motor processor • Carries out actions

Information Input and OutputInformation Input and Output

• Input channels are the five senses- With some more important than

others- Vision primarily

• Output channels are human effectors- E.g., limbs, fingers, head, vocal

system

VisionVision

Two stages in visionTwo stages in vision

• • physical reception of stimulusphysical reception of stimulus

• • processing and interpretation of stimulusprocessing and interpretation of stimulus

12

Visual Perception Visual Perception

• How we can see?How we can see?

                                                                                         

                                                              

The Eye - physical reception

•mechanism for receiving light and transforming it into electrical energy

•light reflects from objects

•images are focused upside-down on retina

•retina contains rods for low light vision and cones for colour vision

•ganglion cells (brain!) detect pattern and movement

14

Marr’s Theory of Vision Marr’s Theory of Vision

• Vision can be explained with a three-level modelVision can be explained with a three-level model

Primary Sketch 2½D Sketch 3D Sketch

Environment: Visible LightEnvironment: Visible LightHumans have receptors Humans have receptors for (a small part of) the for (a small part of) the electromagnetic electromagnetic spectrumspectrum

- Have receptors sensitive Have receptors sensitive to (fire when excited by) to (fire when excited by) energy 400-700nmenergy 400-700nm

- Snakes “see” infrared, Snakes “see” infrared, some insects ultravioletsome insects ultraviolet

- What would life be like if What would life be like if humans could see other humans could see other parts of electromagnetic parts of electromagnetic spectrum???spectrum???

Interpreting the signalInterpreting the signal

Size and depthSize and depth- visual angle indicates how much of visual angle indicates how much of

view object occupiesview object occupies(relates to size and distance from eye)(relates to size and distance from eye)

- visual acuity is ability to perceive visual acuity is ability to perceive detail detail (limited)(limited)

- familiar objects perceived as constant familiar objects perceived as constant size size

(in spite of changes in visual angle when far (in spite of changes in visual angle when far away)away)

Interpreting the signal (cont)Interpreting the signal (cont)• BrightnessBrightness

- subjective reaction to levels of lightsubjective reaction to levels of light- measured by just noticeable differencemeasured by just noticeable difference- visual acuity increases with luminance as does visual acuity increases with luminance as does

flickerflicker

• ColourColour- made up of hue, intensity, saturationmade up of hue, intensity, saturation- cones sensitive to colour wavelengthscones sensitive to colour wavelengths- blue acuity is lowestblue acuity is lowest- 8% males and 1% females colour blind8% males and 1% females colour blind

ProximityProximity

Optical IllusionsOptical Illusions

the Ponzo illusion the Mueller-Lyer illusion

Optical IllusionsOptical Illusions

Human Eye: Chromatic AberrationHuman Eye: Chromatic Aberration

Color BlindnessColor Blindness• Normal:Normal:

- trichromatictrichromatic• No red, green, blue: No red, green, blue: dichromaticdichromatic• The most prevalent causes are confusion

between red and green• suffer from a deficiency in perceiving

blue/yellow differences

Fall 201123

MechanismMechanism

+++ +++

+++

- --

+++

- --

+++

- --

+++

- --

- --

- --

- --

- --

- --

- --

- --

- --- -

-

---

- --

---

- --

---

- --

---

- --

---

- --

---

Fall 2011

Reading

•Several stages:

• visual pattern perceived

decoded using internal representation of language

• interpreted using knowledge of syntax & semantics

•Word shape is important to recognition

•Negative contrast improves reading from computer screen

Word shapesWord shapes

Proof-Reading IllusionProof-Reading Illusion

What ifWhat if ….….

• User visual attention is need for User visual attention is need for another activityanother activity- Driving & cell phone / gpa navigation….Driving & cell phone / gpa navigation….

• Were colour blind?Were colour blind?

• Needed reading glasses?Needed reading glasses?

• Had really poor eye sight that couldn’t Had really poor eye sight that couldn’t corrected by glasses?corrected by glasses?

• User was blind?User was blind?

Hearing

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

•Humans can hear frequencies from 20Hz to 15kHz•Physical apparatus:• outer ear - protects inner and amplies sound• middle ear- transmits sound waves as vibrations to inner ear• inner ear - chemical transmitters are released and cause impulses in auditory nerve.

What if….What if….

• Users are in a noisy environmentUsers are in a noisy environmentPhone call/ text message?Phone call/ text message?

• User hearing is below averageUser hearing is below average

• User is deafUser is deaf

Touch

•Provides important feedback about environment.•May be key sense for someone who is visually impaired.•Stimulus received via receptors in the skin:• thermo receptors - heat and cold• nociceptors - pain• mechanoreceptors - pressure (some instant, some continuous)•Some areas more sensitive than others e.g. fingers.•Kinesthesis - awareness of body position

32

Touch devicesTouch devices

• Interesting research in the Interesting research in the areas of sound and touchareas of sound and touch

– This is what is being used for the ‘teaching visually impaired kids to sign their name’ project

• The nintendo wiis multimodal with haptics too

• Touch phones are so NOW!

Pre-training circle

Post training circle

MovementMovement• Time taken to respond to stimulus:Time taken to respond to stimulus:

reaction time + movement timereaction time + movement time• Movement time dependent on age, fitness etc.Movement time dependent on age, fitness etc.• Reaction time - dependent on stimulus type:Reaction time - dependent on stimulus type:

- visualvisual ~ 200ms~ 200ms- auditoryauditory ~ 150 ms~ 150 ms- painpain ~ 700ms~ 700ms

• Increasing reaction time decreases accuracy in the Increasing reaction time decreases accuracy in the unskilled operator but not in the skilled operator.unskilled operator but not in the skilled operator.

Movement (cont)Movement (cont)• Fitts' Law describes the time taken to hit a screen Fitts' Law describes the time taken to hit a screen

target:target:

Mt = a + b logMt = a + b log22(D/S + 1)(D/S + 1)

where:where: a and b are empirically determined constantsa and b are empirically determined constantsMt is movement timeMt is movement timeD is Distance D is Distance S is Size of targetS is Size of target

targets as large as possibletargets as large as possibledistances as small as possibledistances as small as possible

Model Human Processor - OriginalModel Human Processor - Original

MemoryMemory

There are three types of memory function.There are three types of memory function.

37

What is Attention? What is Attention? • DefinitionDefinition

Attention is the focusing of perception on a limited range of Attention is the focusing of perception on a limited range of stimuli, leading to heightened awarenessstimuli, leading to heightened awareness

• ExplanationExplanation- Our senses are constantly bombarded with images, sounds, Our senses are constantly bombarded with images, sounds,

smells, tastes and touchsmells, tastes and touch

- How to deal with all this information in such a way as to make How to deal with all this information in such a way as to make sense out of itsense out of it

- Human tendency is to avoid getting overloaded with Human tendency is to avoid getting overloaded with informationinformation

- This is done by employing the selective process of attentionThis is done by employing the selective process of attention Withdraw from some things in order to deal efficiently with othersWithdraw from some things in order to deal efficiently with others

• Divided attentionDivided attention

Available capacity

Possible activities

senses

Short term store

Processing

• Focused attention

Models of AttentionModels of Attention

Example 1 (Preece, P. 103)Example 1 (Preece, P. 103)

40

Focused Attention vs. Divided AttentionFocused Attention vs. Divided Attention

• An attention may be An attention may be - Focused attentionFocused attention

Attending one event at a time out of several competing Attending one event at a time out of several competing stimulistimuli

ExampleExample When several students in a class asking to their teacher When several students in a class asking to their teacher

simultaneously simultaneously

- Divided attentionDivided attention Ability to attend to more than one things at a timeAbility to attend to more than one things at a time

ExampleExample When watching a video musicWhen watching a video music

41

Voluntary Attention vs. Involuntary AttentionVoluntary Attention vs. Involuntary Attention

• A further properties of attention is A further properties of attention is - Voluntary attentionVoluntary attention

Making a conscious effort to change attentionMaking a conscious effort to change attention

ExampleExample While driving a car and you see a mass fighting themselves on While driving a car and you see a mass fighting themselves on

the road sidethe road side

- Involuntary attentionInvoluntary attention When the salient characteristics of the competing stimuli grab When the salient characteristics of the competing stimuli grab

the attentionthe attention

ExampleExample While working with a computer and heard your favorite music While working with a computer and heard your favorite music

in the next roomin the next room

Attention and Automatic ActionAttention and Automatic Action

• Frequent activities become automatic.Frequent activities become automatic.• Carried out without conscious attention.Carried out without conscious attention.• User does not make conscious decision.User does not make conscious decision.

• Requiring confirmation does not necessarily reduce errors!Requiring confirmation does not necessarily reduce errors!

43

Sensory Memory Sensory Memory • Information from the external world is initially registered Information from the external world is initially registered

by the specific sensory storesby the specific sensory stores- Like input buffers holding a direct representation of sensory Like input buffers holding a direct representation of sensory

informationinformation

• Only a small fraction of all information entering the sensory Only a small fraction of all information entering the sensory store is attended for further processingstore is attended for further processing

Moving a finger in front of the eyesMoving a finger in front of the eyes We cannot see the finger more than one place at once We cannot see the finger more than one place at once

Firework displayFirework display

• The information is lost by The information is lost by being written over by successive being written over by successive informationinformation or or through the process of decaythrough the process of decay- Information remains in sensory memory very briefly, in the order Information remains in sensory memory very briefly, in the order

of 0.5 secondsof 0.5 seconds

Short-term memory (STM)

Scratch-pad for temporary recall

rapid access ~ 70ms

rapid decay ~ 200ms

limited capacity - 7± 2 chunksThe human ability to group information into related small sets (chunks). 

Short-term Memory Short-term Memory

• Information from sensory store is attended to Information from sensory store is attended to and selected for further processing in the short-and selected for further processing in the short-term storeterm store

• It is also called working memoryIt is also called working memory

• Information reaching the short-term memory Information reaching the short-term memory store is actively processed and may then be store is actively processed and may then be transferred into the long-term memory storetransferred into the long-term memory store

S e n s o r y m e m o r yI c o nic

E c ho ic H ap tic

S h o r t-te r m m e m o r yo r

W o r k in g m e m o r y

Attended

Short Term MemoryShort Term Memory

• ExampleExample

35 x 635 x 6

Step 1: 30 x 6Step 1: 30 x 6

Step 2: 5 x 6Step 2: 5 x 6

Ans: step 1 + step 2Ans: step 1 + step 2

Short Term MemoryShort Term Memory

• ExampleExample

212348278493202 (difficult)212348278493202 (difficult)

0121 414 2626 (easy)0121 414 2626 (easy)

HEC ATR ANU PTH ETR EETHEC ATR ANU PTH ETR EET

(The Cat Ran Up The Tree)(The Cat Ran Up The Tree)

48

Capacity of Short-term Memory Capacity of Short-term Memory

• Capacity to hold information is limited in timeCapacity to hold information is limited in time

- Information remains in short-term memory very briefly, Information remains in short-term memory very briefly, in the order of 200 msin the order of 200 ms

• Capacity to hold information is limited in amountCapacity to hold information is limited in amount

- There are two basic methods for measuring memory There are two basic methods for measuring memory capacitycapacity1.1. Determining the length of a sequence which can be remembered Determining the length of a sequence which can be remembered

in orderin order

2.2. Items to be freely recalled in any order (say, in memory game)Items to be freely recalled in any order (say, in memory game)

49

Concept of Concept of 7 7 ±± 2 2

• An observation by George Miller (1956)An observation by George Miller (1956)- The magic number 7 The magic number 7 ±± 2 2- The number is the one most often known to user interface The number is the one most often known to user interface

developersdevelopers- People can recall somewhere between 5 and 9 things at one timePeople can recall somewhere between 5 and 9 things at one timeExamplesExamples - Let’s see the following sequence of digits and try to write down as Let’s see the following sequence of digits and try to write down as

much of the sequence as you canmuch of the sequence as you can 364207120948364207120948 The average can easily recall between 5 to 9 digitsThe average can easily recall between 5 to 9 digits

- Now try the following sequence. Did you recall that more easily?Now try the following sequence. Did you recall that more easily? 03742 58 237603742 58 2376

50

Generalization of the 7 Generalization of the 7 ±± 2 Rule 2 Rule

• We can remember 7 We can remember 7 ± 2 ± 2 chunks of information chunks of information- Chunking information can increase the short-term memory Chunking information can increase the short-term memory

capacitycapacity

• This is very much relevant in user interface designThis is very much relevant in user interface designExampleExample- Command line interface in UnixCommand line interface in Unix

A command has a number of parameters of options, to be applied in a A command has a number of parameters of options, to be applied in a particular order, and it is going to be applied to several files that have particular order, and it is going to be applied to several files that have long path nameslong path names

The user then has to hold the command name, its parameters and the The user then has to hold the command name, its parameters and the file path names in short-term memory while he types them infile path names in short-term memory while he types them in

For the user, task may cause problems if the number of items or For the user, task may cause problems if the number of items or chunks in the command is more than 7chunks in the command is more than 7

What some designers get up to…What some designers get up to…

• Present only 7 options on a menuPresent only 7 options on a menu

• Display only 7 icons on a tool barDisplay only 7 icons on a tool bar

• Have no more than 7 bullets in a listHave no more than 7 bullets in a list

• Place only 7 items on a pull down menuPlace only 7 items on a pull down menu

• Place only 7 tabs on the top of a website Place only 7 tabs on the top of a website pagepage

But this is wrong? Why?But this is wrong? Why?

Long-term memory (LTM)

Repository for all our knowledge

slow access ~ 1/10 second

slow decay, if any

huge or unlimited capacity

Two types

episodic - serial memory of events

semantic - structured memory of facts, concepts, skills

Long-term memory (cont.)

•Semantic memory structure provides access to information

•Represents relationships between bits of information

•Supports inference

•Model: semantic network

• inheritance - child nodes inherit properties of parent nodes

• relationships between bits of information explicit

• supports inference through inheritance

54

Long-term MemoryLong-term Memory

• Information entering the long-term memory is assumed to be Information entering the long-term memory is assumed to be permanentpermanent

• Processed information are stored as knowledge, which can be Processed information are stored as knowledge, which can be retrieved any subsequent timeretrieved any subsequent time

S e n s o r y m e m o r yI c o nic

E c ho ic H ap tic

S h o r t-te r m m e m o r yo r

W o r k in g m e m o r yL o n g -te r m m e m o r yAttended Rehearsal

Long Term MemoryLong Term Memory

• ExampleExample- the dog the dog

chewed the chewed the foodfood

- the cat stole the cat stole the foodthe food

- the dog chased the dog chased the catthe cat

dog

catfoodstole

chewed

chased

Student Name ServerUtah School of Computing slide slide 5656

Long-term memory - semantic network

decay

• information is lost gradually but very slowly

•new information replaces old: retroactive interference

•old may interfere with new: proactive inhibition

•so may not forget at all memory is selective ….

• … affected by emotion - can subconsciously `choose' to forget

LTM - Forgetting

• recall

• information reproduced from memory can be assisted by categories

• recognition

• information gives knowledge that it has been seen before

LTM - retrieval

59

Norman’s Notion of KnowledgeNorman’s Notion of Knowledge

Norman (1988) introduced the notionsNorman (1988) introduced the notions

• Knowledge in the world Knowledge in the world Recognition Recognition - Information stored in the worldInformation stored in the world- Less load on memoryLess load on memory

• Knowledge in the head Knowledge in the head Recall Recall- Information stored in the memoryInformation stored in the memory- Too load on memoryToo load on memory

Thinking: reasoning and problem solving

Reasoning

Deductive: derive logically necessary conclusion from given premises.

e.g. If it is Monday then he will not go to work

It is Monday

Therefore he will not go to work.

Logical conclusion not necessarily true:

e.g. If it is raining then the ground is dry

It is raining

Therefore the ground is dry

Inductive Reasoning

Inductive: generalize from cases seen to cases unseen

e.g. all elephants we have seen have trunks

therefore all elephants have trunks.

Humans not good at using negative evidence

ModesModes

• ModesModes – the same action means some – the same action means some

different depending on the “mode”different depending on the “mode”

- Many examples aboundMany examples abound

• ModesModes are likely to be confusing are likely to be confusing

ModesModes

• Digital alarm clock: Time v AlarmDigital alarm clock: Time v Alarm

• Car stereo: Treble-Bass, Lt-Rt, Fr-BackCar stereo: Treble-Bass, Lt-Rt, Fr-Back

• EmacsEmacs

• Various finite state machinesVarious finite state machines

• Automobile controlsAutomobile controls

• Remote for TV-CD-VCRRemote for TV-CD-VCR

Universal UsabilityUniversal Usability• Gender differencesGender differences

- No clear patterns have emergedNo clear patterns have emerged GamesGames

Tend to be aimed at young malesTend to be aimed at young males Highest demographic of online players: older womenHighest demographic of online players: older women

Productivity toolsProductivity tools Largely male designersLargely male designers Poor UI choices (KILL a process)Poor UI choices (KILL a process)

Universal Usability (cont.)Universal Usability (cont.)• Users with disabilitiesUsers with disabilities

- Designers must plan early to accommodate users Designers must plan early to accommodate users with disabilities with disabilities

- Early planning is more cost efficient than adding on Early planning is more cost efficient than adding on later later

- Businesses must comply with the "Americans With Businesses must comply with the "Americans With Disabilities" Act for some applicationsDisabilities" Act for some applications

- Temporary disabilities (glasses, loud environments)Temporary disabilities (glasses, loud environments)• Elderly UsersElderly Users

- Including the elderly is fairly ease, designers Including the elderly is fairly ease, designers should allow for variability within their applications should allow for variability within their applications via settings for sound, color, brightness, font sizes, via settings for sound, color, brightness, font sizes, etc.etc.

Usability Topic: Color Usability Topic: Color BlindnessBlindness

• About 8% of men have color blindness of About 8% of men have color blindness of some type, and about 0.5% of womensome type, and about 0.5% of women- Varies along ethnicityVaries along ethnicity

• Misnomer: most people see color difference of Misnomer: most people see color difference of some kindsome kind- Color deficiencyColor deficiency- Monochromacy, very rare conditionMonochromacy, very rare condition

• Genetic condition, alteration of the cones in Genetic condition, alteration of the cones in the eyethe eye

• Most commonly expressed in red/green Most commonly expressed in red/green deficiency, often with specific shareddeficiency, often with specific shared

Designing for Color BlindnessDesigning for Color Blindness

• Avoid red-on-green at all costs!Avoid red-on-green at all costs!

• Consider using magenta instead of redConsider using magenta instead of red- Avoid using magenta with blueAvoid using magenta with blue

• Use redundant coding of informationUse redundant coding of information- Use color and shape/locationUse color and shape/location

• Avoid thin lines / small symbolsAvoid thin lines / small symbols- For color-coded text, use bold fontsFor color-coded text, use bold fonts

Universal Usability (cont.)Universal Usability (cont.)

• Designing for/with childrenDesigning for/with children- Broad term: toddlers to teenagersBroad term: toddlers to teenagers- Younger children: evolving dexterity, level of Younger children: evolving dexterity, level of

literacy, short attention spanliteracy, short attention span- Parental control and safety vs desire of Parental control and safety vs desire of

challenge and learningchallenge and learning

Universal Usability (cont.)Universal Usability (cont.)

• Some practical user typesSome practical user types- The BeginnerThe Beginner

Just starting out, possibly not very technicalJust starting out, possibly not very technical Will need lots of hand-holding, at least to startWill need lots of hand-holding, at least to start

Ever try teaching your grandmother AOL?Ever try teaching your grandmother AOL?

- The Casual UserThe Casual User Uses the system infrequentlyUses the system infrequently Uses short-cuts, occasionally needs helpUses short-cuts, occasionally needs help

- The “Technically Challenged” UserThe “Technically Challenged” User Doesn’t know, doesn’t want to know!Doesn’t know, doesn’t want to know! Will need lots of hand-holding (i.e., help system)Will need lots of hand-holding (i.e., help system)

QuestionsQuestions• The human eye has a number of

limitations.  Give three examples�• There are three types of human

memory.  List them�• Describe what is thought to happen

when people forget things� �

Fall 2011

Culture

Fall 2011

• Up is better than down- Religion, Dante, …

• When we refer to ourselves- We point to our noses?- Our chests?

• Point with index finger or hand ?

CultureCulture

Fall 2011

Cultural & International DiversityCultural & International Diversity

• Characters, numerals, special Characters, numerals, special characters, diacriticalscharacters, diacriticals

• Left-to-right v (right-to-left or vertical Left-to-right v (right-to-left or vertical reading)reading)

• Date and time formats Date and time formats - International standardsInternational standards

• Numeric and currency formatsNumeric and currency formats

Fall 2011

Cultural & International DiversityCultural & International Diversity

• Weights and measuresWeights and measures

• Telephones and addressesTelephones and addresses- Fixed v variable lengthFixed v variable length

• Names and titlesNames and titles- Mr., Ms., Mme, M., Dr.Mr., Ms., Mme, M., Dr.

• SSNs, national IDs, SSNs, national IDs,

• Capitalization and punctuationCapitalization and punctuation

Universal Usability (cont.)Universal Usability (cont.)• Cultural and international diversityCultural and international diversity

- Characters, numerals, special characters, and diacriticals Characters, numerals, special characters, and diacriticals - Left-to-right versus right-to-left versus vertical input and reading Left-to-right versus right-to-left versus vertical input and reading - Date and time formats Date and time formats - Numeric and currency formats Numeric and currency formats - Weights and measures Weights and measures - Telephone numbers and addresses Telephone numbers and addresses - Names and titles (Mr., Ms., Dr.) Names and titles (Mr., Ms., Dr.) - Social-security, national identification, and passport numbers Social-security, national identification, and passport numbers - Capitalization and punctuation Capitalization and punctuation - Sorting sequences Sorting sequences - Icons, buttons, colors Icons, buttons, colors - Pluralization, grammar, spelling Pluralization, grammar, spelling - Etiquette, policies, tone, formality, metaphors Etiquette, policies, tone, formality, metaphors

Which universal, which culturally-specific?Which universal, which culturally-specific?

• ..

MappingMapping• Relationship between controls and their movements and Relationship between controls and their movements and

the results in the worldthe results in the world

• Why is this a poor mapping of vcr control buttons (rewind, Why is this a poor mapping of vcr control buttons (rewind, play, fast forward, fast rewind)?play, fast forward, fast rewind)?

MappingMapping

• Why is this a better mapping?Why is this a better mapping?

• The control buttons are mapped better onto the sequence of actions The control buttons are mapped better onto the sequence of actions of fast rewind, rewind, play and fast forwardof fast rewind, rewind, play and fast forward

79

Why are Interfaces Important?Why are Interfaces Important?

• Sit-down-and-use computers and software Sit-down-and-use computers and software - Don't read the manuals Don't read the manuals

• Usability is critical to software sales: Usability is critical to software sales: - In magazine ratings In magazine ratings - "User friendly" "User friendly"

• HCI-trained people build better interfaces HCI-trained people build better interfaces - Programmers don't think like end-users Programmers don't think like end-users - Exposure to different kinds of interfaces, problems Exposure to different kinds of interfaces, problems - User model, not system model User model, not system model

• Briefly describe the main features that are you feel will Briefly describe the main features that are you feel will support the user of this operating system. support the user of this operating system.

Logical or ambiguous design?Logical or ambiguous design?

• Where do you plug the Where do you plug the mouse? mouse?

• Where do you plug the Where do you plug the keyboard?keyboard?

• top or bottom connector?top or bottom connector?

• Do the color coded icons Do the color coded icons help?help?

From: www.baddesigns.com

How to design more logicallyHow to design more logically

- A. provides direct adjacent - A. provides direct adjacent mapping between icon and mapping between icon and connectorconnector

- B. provides color coding to - B. provides color coding to associate the connectors with associate the connectors with the labelsthe labels

From: www.baddesigns.com

Mapping Mapping

- Which controls go with which rings (burners)?Which controls go with which rings (burners)?

A B C D

Why is this a better design?Why is this a better design?

Fall 2011

Palm Desktop Calendar Palm Desktop Calendar

Fall 2011

Palm Handheld Calendar Palm Handheld Calendar

ExampleExample

An elevator panel will require buttons An elevator panel will require buttons for four floors (parking, main floor, for four floors (parking, main floor, second and third floor), door open, second and third floor), door open, door close, stop, and activate door close, stop, and activate emergency intercom. Propose a emergency intercom. Propose a design for these buttons. Draw them design for these buttons. Draw them in a single rowin a single row

Examples of Bad Design … and WhyExamples of Bad Design … and Why

- Elevator controls and labels on the bottom row all look the Elevator controls and labels on the bottom row all look the same, so it is easy to push a label by mistake instead of a same, so it is easy to push a label by mistake instead of a control buttoncontrol button

- People do not make same mistake for the labels and buttons People do not make same mistake for the labels and buttons on the top row. Why not?on the top row. Why not?

From: www.baddesigns.com

EndEnd