Interface Design Guidelines

Blame the Design, not the User

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 www.co.lawrence.tn.us and www.uni-magdeburg.de

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 //www.osh.dol.govt.nz/

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 www.historylink101.com

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.

User Task Process

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

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

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

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

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

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

Properties of Good UIs

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

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

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

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

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: www.baddesigns.com Preece 2002

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

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

Natural Mappings From Palmiter

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

Why is this a better design? Preece 2002 From Palmiter

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

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

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

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

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

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

Supporting Information Foraging

Available Information Growing Exponentially Image from: http://stevensonfinancialmarketing.wordpress.com/category/content-marketing/

YouTube Uploads per Minute As of 2012, users upload 72 hours of video every minute Image from: http://www.techspot.com/news/41096-youtube-35-hours-of-video-uploaded-every-minute.html

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

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: http://en.wikipedia.org/wiki/Herbert_A._Simon

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: http://en.wikipedia.org/wiki/George_Armitage_Miller

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

Patches Image from: http://srq-ag-food.blogspot.com/2011/04/april-29th-arbor-day-native-and-fruit.html Adapted from Charles Gibbs

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: http://www.interaction-design.org/encyclopedia/information_foraging_theory.html

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

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.

Patches Image from: http://srq-ag-food.blogspot.com/2011/04/april-29th-arbor-day-native-and-fruit.html Adapted from Charles Gibbs