CS -213

Human Computer Interaction

Spring 2015

08 – Design of Everything

Imran Ihsan
Assistant Professor (CS)
Air University, Islamabad

www.imranihsan.com | www.opuseven.com

opuseven iimranihsan imranihsan iimranihsan iihsan iimranihsan

START
 What to do now
• Start brainstorming!!
– Lots of ideas, then narrow down to 3 or 4

• Explore design space

– Vary what you can – hardware, forms of input, forms of output, features, requirement priorities,
usability priorities

• Be off the wall, crazy

– This will lead to less crazy but original ideas

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 2 ©→

2013
 Summary
• Darn these hooves!
• I hit the wrong switch again!
• Who designs these instrument Panels, raccoon?!

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 3 ©→

2013
 Don Norman
• Professor at Northwestern and Principal of Nielsen Norman group
• Previously Professor at UCSD, senior positions at Apple & HP
• ACM/CHI Lifetime Achievement Award
• Prolific author
• http://www.jnd.org/

• Affordances are important

• Minimize the gulf of interpretation and gulf of execution
• Use natural mappings
• Make state visible
• Use a conceptual model that makes sense
• Provide feedback

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 4 ©→

2013
 Daily Challenges
• How many of you can use all the functionality in your
– VCR
– Digital watch
– Copy machine
– Stereo system
– Plumbing fixtures

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 5 ©→

2013
 Hall of Shame Example
• Leitz slide projector
– To move forward, short press
– To move backward, long press

• What happens when you get frustrated?

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 6 ©→

2013
 Fun Example
• Phones

• How do you
– transfer a call
– change volume
– store a number
– ...

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 7 ©→

2013
← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 8 ©→
2013
 Changing Ringer Volumen
• Press “Program”
• Press “6”
• Set volume
– Low - Press “1”
– Medium - Press “2”
– High - Press “3”
• Press “Program”

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 9 ©→

2013
 Much Better

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 10 ©→

2013
 Important Concepts
• Affordances
• Visibility
• Conceptual models
• Mapping
• Feedback
• Constraints

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 11 ©→

2013
 Door Opening Affordances

• Which doors are easy to open?

• Which doors are hard to open?
• Why?

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 12 ©→

2013
 Affordances in interfaces
• Interfaces are virtual and do not have ‘real’ affordances like physical objects

• Interfaces have ‘perceived’ affordances

– Learned conventions of arbitrary mappings between action and effect at the interface
– Some mappings are better than others

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 13 ©→

2013
 Mantra
• Complex things may need explanation, but simple things should not
– If a simple thing requires instructions, it is likely a failed design

• Norman’s 2 main principles

– Provide a good conceptual model
– Make things visible
• Affordances is part of this

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 14 ©→

2013
 Conceptual Models
• People build their own systems of how things work
– Example - thermostat

• Designer can help user foster an appropriate conceptual model

– Appearance, instructions, behavior...

• Mental models are not always right

• Two Classes:
– Functional model
• Stimulus - response
• “Press the accelerator once, then turn the key”
• At surface or superficial level
– Structural model
• Deeper sense of why it happens, not just what happens
• “Press the accelerator to engage the automatic choke on a carburetor”

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 15 ©→

2013
 Visibility
• When functionality is hidden, problems in use occur
– Occurs when number of functions is greater than number of controls

• When capabilities are visible, it does not require memory of how to use
– Recognition over Recall
– in the world vs. in the head

Simple Example
• Bathroom faucets
• Two functions
– Hot/cold
– Flow

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 16 ©→

2013
 Bathroom Faucet 1
• Can you figure out how to use it?
• Are two functions clear and independent?

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 17 ©→

2013
 Bathroom Faucet 2
• Can you figure out how to use it?
• Are two functions clear and independent?

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 18 ©→

2013
 Bathroom Faucet 3
• Can you figure out how to use it?
• Are two functions clear and independent?

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 19 ©→

2013
 My Parent’s Microwave

5:45

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 20 ©→

2013
 My Microwave

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 21 ©→

2013
 Mapping
• Relationship between control and action/result in the world
• Take advantage of physical analogies or cultural understandings
• Good:
– Car, various driving controls
– Mercedes Benz seat adjustment example
• Bad
– Car stereo - Knob for front/back speakers

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 22 ©→

2013
 Which is Better?

or

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 23 ©→

2013
 Mapping Example: Euros
• Size :: Value

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 24 ©→

2013
 Mapping Example: Stove

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 25 ©→

2013
 Yikes

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 26 ©→

2013
 Why Not Design Better
• Stove

Physical, monetary,
• Speakers convenience, etc.,
constraints dictate
otherwise

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 27 ©→

2013
 Feedback
• Sending information back to the user about what has been done
• Includes sound, highlighting, animation and combinations of these
– e.g. when screen button clicked on provides sound or red highlight feedback:

“ccclichhk”

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 28 ©→

2013
 Execution-Evaluation cycle

Norman (DOET, p. 46)

Gulf
of
Execution User
Physical
Goals
System
Gulf
of
Evaluation

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 29 ©→

2013
 Goals, Execution, Evaluation

Goals
What we
want to happen

Execution Evaluation
(Gulf of Execution) What we Comparing what happened (Gulf of Evaluation)
do to the world with what we wanted to happen

Physical System

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 30 ©→

2013
 Execution

Goals
What we
want to happen

An intention to act
so as to achieve the goal

The actual sequence of actions

that we plan to do

The physical execution of that

action sequence

Physical System

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 31 ©→

2013
 Evaluation

Goals
What we
want to happen

Evaluation of the interpretations

with what we expected to happen

Interpreting the perception according

to our expectations

Perceiving the state

of the world

Physical System

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 32 ©→

2013
 7 Stages – All Together

Goals
What we
want to happen

An intention to act Evaluation of the interpretations

so as to achieve the goal with what we expected to happen

The actual sequence of actions Interpreting the perception according

that we plan to do to our expectations

The physical execution of that Perceiving the state

action sequence of the world

Physical System

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 33 ©→

2013
 Implications – Which Gulf does these Address?
• Make current state and action alternatives visible
• Need good conceptual model with consistent system image
• Interface should include mappings that reveal relationships between stages
• User should receive continuous feedback
• Provide affordances

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 34 ©→

2013
 Goal: Minimize Gulfs
• Gulf of Execution • Gulf of Evaluation
– Conceptual model – Make state visible
– Affordances – Feedback
– Natural mappings

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 35 →

 Try and Try Again
• Norman thinks that it often takes 5 or 6 tries to get something “right”

• Simply may not have that luxury in a competitive business environment

← 08 – Design of Everything | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 36 ©→

2013