1. Interface Design Guidelines

2. Blame the Design, not the User

3. Tractors Early design Terrain Farmer high center of gravity
unsurfaced and rough
hilly
Farmer
works long hours
works quickly
narrow front
wheel base
Images from and

4. Tractors Result Quotes from National AG Safety Database
older tractors have narrow front ends that are easily upset
tractor upsets cause more fatalities than other farm accidents
injuries often include a broken or crushed pelvis.
Accident image from //

5. Tractors Used to be called driver’s error But roll cage
accidents less frequent as modern designs have
roll cage
low center of gravity
wider wheel bases
Tractor from

6. There are many examples of “blame the user” mentality in our culture, so it’s something that you want to look out for when designing and evaluating interfaces.

7. User Task Process

8. Goals, Execution, Evaluation
What we
want to happen
Execution
What we
do to the world
Evaluation
Comparing what happened
with what we wanted to happen
(Gulf of Execution)
(Gulf of Evaluation)
Physical System

9. Execution Physical System 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
Break these into further steps
Want to do menu selection – have to find the menu item, - then physically select it
Physical System

10. Evaluation Physical System 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
Visual system at lowest level
Did it move? Did the setting change? Is this what we wanted?
Physical System

11. Seven Stages - All Together
Goals
What we
want to happen
An intention to act
so as to achieve the goal
Evaluation of the interpretations
with what we expected to happen
The actual sequence of actions
that we plan to do
Interpreting the perception according
to our expectations
The physical execution of that
action sequence
Perceiving the state
of the world
Design – it is useful to consider each of these steps and assess what we are doing to facilitate these steps.
Physical System

12. Goal: Reading a book
It’s getting dark and it’s hard for me to see the pages. I need more light.

13. Seven Stages - All Together
Goals
What we
want to happen
An intention to act
so as to achieve the goal
Evaluation of the interpretations
with what we expected to happen
The actual sequence of actions
that we plan to do
Interpreting the perception according
to our expectations
The physical execution of that
action sequence
Perceiving the state
of the world
Design – it is useful to consider each of these steps and assess what we are doing to facilitate these steps.
Physical System

14. Properties of Good UIs

15. A good interface should have:
Effective affordances
Visibility
Natural mappings
Feedback to the user

16. Affordances Physical affordances:
How do the following physical objects afford?
Are they obvious?
Preece 2002
From Palmiter

17. UI Affordance It should be obvious how a control is used.
Does the user perceive that clicking on that object is a meaningful, useful action?
From Palmiter

18. Affordances Virtual affordances
How do the following screen objects afford?
What if you were a novice user?
Would you know what to do with them?
Preece 2002
From Palmiter

19. Visibility • This is a control panel for an elevator.
• How does it work?
• Push a button for the floor you want?
• Nothing happens. Push any other button? Still nothing. What do you need to do?
It is not visible as to what to do!
From:
Preece 2002

20. Visibility
…you need to insert your room card in the slot by the buttons to get the elevator to work!
How would you make this action more visible?
• make relevant parts visible
• make what has to be done obvious
Preece 2002

21. Affordance vs. Visibility
Affordance: how do you interact with these?
hyperlink
Visibility: what do they do?
Add user
Class Roster

22. Natural Mappings
From Palmiter

23. Natural Mappings Which controls go with which burners? A B C D
Preece 2002
From Palmiter

24. Why is this a better design?
Preece 2002
From Palmiter

25. Mapping 1.5 to 2 million votes were "lost" in the controversial 2000 Presidential election due to ballot design (CalTech/MIT Voting Technology Report, July, 2001).
From Palmiter

26. Feedback
Is the action I just took, understood by the device or system?
Did I do the right thing?
Is the system ready for the next step?
From Palmiter

27. Feedback Let the user always know where they are in the process
Feedback about where you can go and where you are (feedback and feed forward)
Tell them what’s happening
Tell the user how to recover
Make error messages clear with alternatives for action
From Palmiter

28. What does bunny.move(forward, 10) do?
In the context of laying out a scene?

29. Unhelpful feedback ORCHID Research Group From Bailey
Department of Computer Science, University of Illinois at Urbana-Champaign

30. Design a Terrible Email Client
You should incorporate example violations of:
Effective affordances
Visibility
Natural mappings
Feedback to the user

31. Supporting Information Foraging

32. Available Information Growing Exponentially
Image from:

33. YouTube Uploads per Minute
As of 2012, users upload 72 hours of video every minute
Image from:

34. Growth of Human Capabilities
Year
0.01
0.1 1 10
100
1000
10000
100000
1750
1800
1850
1900
1950
2000
Capacity of human working memory
Growth in attention
Adapted from Peter Pirolli

35. Attention is a Limited Resource
A wealth of information creates a poverty of attention and a need to allocate it efficiently.
Herbert Simon
Image from:

36. Humans as Informavores
Just as the body survives by ingesting negative entropy, the mind survives by ingesting information. In a very general sense, all higher organisms are informavores.
Image from:

37. Inspired by Optimal Foraging Theory
An animal will forage as long as the expected gain within a patch is greater than the expected rate of gain from a new patch.
Tb = average time to next patch
T* = Optimal time to stop foraging a patch
Adapted from Peter Pirolli

38. Patches
Image from:
Adapted from Charles Gibbs

39. Information Foraging Theory
Information Patches: The temporal and spatial nature in which information is clustered.
Information Scents: Determination of information value based on navigation cues and metadata.
Information Diet: Decision to pursue one information source over another
Source:

40. [ ] Informavore’s Goal information value cost of interaction maximize
Basically: maximize information gain, minimize the work necessary to accomplish that information gain.

41. Strategy
As long as I predict that I’m more likely to find my target information on my current path than by backing up, keep going.

42. Patches
Image from:
Adapted from Charles Gibbs