Good and Bad Design

What is Interaction Design?  A central concern of interaction design is to develop

interactive product that are usable.
From Preece, Rogers & Sharp’s Interaction Design
And Norman’s The Design of Everyday Things  Usable = easy to learn + effective to use + enjoyable
experience
 A good way to start to think about how to design a
usable interactive product is to compare examples.
 Bad examples are often more instructive
071010-1  www.baddesigns.com
2018년 가을학기  Interface Hall of Shame
9/19/2018 http://homepage.mac.com/braster/iarchitect/shame.htm
박경신 (original domain abandoned)
http://hallofshame.gp.co.at/index.php?file=shame.htm&mode=
original

Bad Design: Elevator Controls Bad Design: Vending Machine

 Elevator controls and labels on the bottom row all

look the same, so it is easy to push a label by  Parking permit machine
mistake instead of a control button  One needs to push
button first to activate
reader
 Normally, one inserts a
bill first before making
selection
 Contravenes well known
 People do not make same mistake for the labels convention
and buttons on the top row. Why not?
www.baddesigns.com/parking2.html

http://www.baddesigns.com/elecon.html
Good Design: Marble Answering Machine Good and Bad Design
 Marble answering machine  What is wrong with the
(Bishop, 1995) remote on the right?
 When one leaves a message,
a marble comes out and  Why is the TiVo remote so
stays in the tray much better designed?
 One can check a message by  Peanut shaped to fit in hand
placing a marble on the  Logical layout and color-
speaker.
coded, distinctive buttons
 Based on how everyday  Easy to locate buttons
objects behave
 Easy, intuitive and a
pleasure to use
 Only requires one-step
actions to perform core
Also see https://vimeo.com/19930744 tasks

What to Design What is Interaction Design?

 Need to take into account:  “Designing interactive products to support the way
 Who the users are people communicate and interact in their everyday
 What activities are being carried out and working lives”
 Where the interaction is taking place  Sharp. Rogers and Preece (2007)
 Need to optimize the interactions users have with a  “The design of spaces for human communication and
product interaction”
 So that they match the users’ activities and needs  Winograd (1997)
 Design decisions based on understanding users’
needs
 Know what people are good and bad at
 Consider what might help people in the way they currently
do things
 Think through what might provide quality user experiences
 Listen to what people want and get them involved
 Use tried-and-tested user-centered methods
 What do professionals do in the
Interaction Design? Interaction Design business?
 Number of other terms used emphasizing what is  Interaction designers
being designed, e.g.  People involved in the design of all the interactive aspects of
 User interface design a product
 Software design  Usability engineers
 User-centered design  People who focus on evaluating products, using usability
 Product design methods and principles
 Web design  Web designers
 Experience design (UX)  People who develop and create the visual design of websites,
 Interactive system design such as layouts
 Interaction design is the umbrella term covering all of  Information architects
these aspects  People who come up with ideas of how to plan and structure
 Fundamental to all disciplines, fields, and approaches interactive products
concerned with researching and designing computer-based  User experience designers (UX)
systems for people  People who do all the above but who may also carry out field
studies to inform the design of products

The User Experience iOS11 (June 5, 2017)

 How a product behaves and is used by people in the
real world
 The way people feel about it and their pleasure and
satisfaction when using it, looking at it, holding it, and
opening or closing it
 “Every product that is used by someone has a user experience:
newspapers, ketchup bottles, reclining armchairs, cardigan
sweaters.” (Garrett, 2003)
 Down to the sensual effect small details have on them
 Such as how smoothly a switch rotates or the sound of a click
and the touch of a button
 Cannot design a user experience, only design for a
user experience

Also read the iOS11 review http://thegear.co.kr/14631

Why was the iPhone user experience
such a success? Design Principles
 Quality user experience from the start  Generalizable abstractions for thinking about different
 Simple, elegant, distinct brand, pleasurable, must have aspects of design
fashion item, catchy names, cool, etc.,  The do’s and don’ts of interaction design
 Suggest to designers what to provide and what to
avoid at the interface
 Intended to help designers explain and improve the
design
 Derived from a mix of theory-based knowledge,
experience and common-sense

The Design of Everyday Things 5 Design Principles

 Don Norman pioneering book  Affordance
[1988]  Visibility
 Originally published as The  Feedback
psychology of everyday things  Constraints
 Motivates and explains usability  Consistency
principles

Norman, Donald A. (2013). The Design of

Explained in Norman, Donald A. The Design of Everyday
Everyday Things. New York: Basic Books. Things. New York: Basic Books.
 What does ‘Affordance’ have to offer
Affordances Interaction Design?
 Concept from Gibson’s ecological psychology [1977]  Interfaces are virtual and do not have affordances like
 Norman refers to “perceived or actual properties of a physical objects
thing, primarily those fundamental properties that  Norman argues it does not make sense to talk about
determine just how the thing could possibly be used” interfaces in terms of ‘real’ affordances
[1988]  Instead interfaces are better conceptualised as
 Refers to an attribute of an object that allows people to know ‘perceived’ affordances
how to use it
 Learned conventions of arbitrary “mappings between action
 Plates (on doors) are for pushing and effect” at the interface
 Knobs are for turning  Some mappings are better than others
 Slots are for inserting things into
 Since has been much popularised in interaction design
to discuss how to design interface objects
 Scrollbars to afford moving up and down
 Icons to afford clicking on

Affordances Affordances
 Physical Affordances  Virtual Affordances
 How do the following physical objects afford? Are they  How do the following screen objects afford?
obvious?  What if you were a novice user?
 Would you know what to do with them?
Affordances Two Conceptual Models
 Poor affordances  Two conceptual models
 Doors push or pull?  The designer’s conceptual model
 Where to push?  The user’s conceptual model
 Good affordances  The system image is the visible part of a device
 Buttons that appear clickable (including the physical structure, the documentation,
instructions, etc).
 The designer only talks to the user through the system image.
 If the system image doesn’t make the design model clear then
the user will create a different model through their
interactions.
 Mental model
 Conceptual model of the way something works, often
constructed from fragmentary evidence.
www.baddesigns.com/doorhand.html  Jef Raskin ”To the user the interface is the product.”
www.baddesigns.com/doors.html

Why is the basic Automobile Easy to

Figure out? Visibility
 Things are visible  Know state of device and actions available
 Good mappings between controls and things  Natural design: No explanations needed
controlled  The more visible functions are, the more likely users
 Easy to determine relationships between actions and results, will be able to know what to do next.
controls and their effects, system state and what’s visible
 When functions are “out of sight”, it makes them more
 Good conceptual model difficult to find and know how to use.
 User given consistent in presentation of operations and results
 Good feedback
 Immediate and obvious effect
Visibility Visibility www.baddesigns.com/elcard.html

 Poor visibility  Getting the elevator to go to your floor

 Boeing 757 Flight Management System did not show names  This is a control panel for an elevator of a nice
of beacons when selecting where to navigate hotel in Los Angeles.
 Good visibility  How does it work?
 Google search page makes it clear where you can enter  Push a button for the floor you want?
search text  Nothing happens. Push any other button?
Still nothing. What do you need to do?
 It is not visible as to what to do!
 You need to insert your room card in the elevator
before it will work.
 You think you need to slide the card in the vertical crack?
 You try sliding the card and pushing the button. It
doesn’t work.
 You flip the card over and try again. This time it works!

Visibility www.baddesigns.com/elcard.html Visibility

 How would you make this action more visible?  Here are some things that would have made it easier
 Make the card reader more obvious to see the “push to start” buttons
 Provide an auditory message, that says what to do  Make it larger
 Provide a big label next to the card reader that flashes when  Using colors that contrasted with the background
someone enters  Removing some of the nearby stickers and decals
 Make relevant parts visible  Making it more centrally located on the gas pump
 Make what has to be done obvious  Using a real 3D button

www.baddesigns.com/pushto.html
Feedback Feedback
 Sending information back to the user about what  Poor feedback
action has been done and what has been accomplished  Boeing 757 Flight Management System provided no feedback
 Includes tactile, verbal, sound, highlighting, animation on what beacon was selected
and combinations of these  Good feedback
 E.g. when screen button clicked on provides sound or red  Typing on keyboard (assuming no delays)
highlight feedback “ccclichhk”

 Needs to be immediate
 Imagine writing with a pen and waiting for the ink to show up
on paper?
 Helps users detect errors
 Helps users explore technologies

Feedback Constraints
 Controls with conflicting feedback. More coffee or less?  Restricting the possible user actions that can be
 The top switch turns the coffee maker on/off. performed
 When it’s on, its light goes on. No light appears when the coffee  Helps prevent user from selecting incorrect options
maker is off. and thereby reduces the chance of making a mistake
 The bottom switch selects the quantity of coffee desired.  Three main types (Norman, 1999)
 The problem is with the light on this bottom switch. When its light  Physical
goes on, for the smaller quantity or for the larger quantity?
 Cultural
 People naturally expect more coffee to be associated with more
light (light on )and less coffee to be associated with less light (light
 Logical
off)

www.baddesigns.com/coffee_rs2.html
Physical Constraints Physical Constraints
 Refer to the way physical objects restrict the  Labels that look like push buttons
movement of things  Elevator controls and labels on the bottom row all look the
 E.g. only one way you can insert a key into a lock same. So, it is easy to push a label by mistake instead of a
control button
 How many ways can you insert a CD or DVD disk into
 People do not make same mistake for the labels and push
a computer? buttons on the top row. Why not?
 How physically constraining is this action?
 How does it differ from the insertion of a floppy disk
into a computer?

www.baddesigns.com/elecon.html

Logical Constraints Logical Constraints

 Rely on people’s understanding of the way the world  Things that don’t work the
works way you expect. Out of order?
 Exploits people’s everyday common sense reasoning  Need to push button first to
about the way the world works activate the bill reader
 Normally insert money first
 Making actions and their effects obvious enables before making selection
people to logically deduce what further actions are  Printed instructions, even
required obvious ones, aren’t going to be
 E.g. Disabling menu options when not appropriate for read by some people.
the task in hand  Contravenes well known
convention

www.baddesigns.com/parking2.html
Cultural Constraints Cultural Constraints
 Learned arbitrary conventions like red triangles for  What do these signs mean? Road sign in Mexico
warning

 Which are universal or which are culturally specific?

 What do these symbols mean? Controls on a rental

car (intended to imitate European designs)

www.baddesigns.com/autoicons.html

Constraints Mappings
 Poor use of constraints  Natural mappings: No explanations needed
 Tokyo Stock Exchange software did not prevent trader from
making an outrageous trade
 Command line systems force you to remember spelling and
syntax of commands Available actions
 Good use of constraints
 Click on icons to invoke commands
 Gray out unavailable actions
User intentions Perceived system state

Actual system state

Mappings Mappings
 Relationship between controls and their movements  Which controls go with which burners?
and the results in the world
 Why is this a poor mapping of control buttons?

 Why is this a better mapping?

A B C D
 Why is this a better design?

 The control buttons are mapped better onto the

sequence of actions of fast rewind, rewind, play and
fast forward
www.baddesigns.com/ranges.html

Mappings Mappings
 Where do you plug in the mouse & keyboard?  How to design them more logically?
A provides direct adjacent mapping between
 Top or bottom connector? 
icon and connector
 Do the color coded icons help?

 B provides color coding to associate the

connectors with the labels

http://www.baddesigns.com/mouseconnector.html
Mappings Mappings
 User intentions to available actions  Available actions to perceived system state
 Is there a natural mapping between what users want to do  The user should not be surprised with what happened after
and what appears possible? they completed an action
 Do users stare at technology for sometime before they take  Technologies should behave in expected ways
action?  Quick feedback is very important
 Or do they immediately know what to do?  Problems more likely if the mappings between user intentions
 Simplicity can help and available actions were not good
 Poor mapping  Poor mapping
 Stove top controls  Pull from a door knob when you were supposed to push
 Clustered light switches  Try to close an application that won’t close
 Good mapping  Good mapping
 Consistent play, rewind, fast forward, stop controls on media  Press gas pedal, feel car accelerate
devices
 Clearly visible and labeled power buttons

Mappings Mappings
 Perceived system state to actual system state  Actual system state to user intentions
 Perceived system state to actual system state  Does the system allow states that users would never want?
 Users think the technology is doing one thing when it really is  Difficult to implement
doing something else  Important for critical systems
 Users unlikely to quickly detect problems  Poor mapping
 Poor mapping  757 Flight Management System did disengage brakes when
 757 Flight Management System had pilots thinking they were accelerating and pulling up to clear mountain
traveling towards different beacon  Tokyo Stock Exchange software sold stocks far below market
 Good mapping prices (and more than were available)
 Well-implemented progress bars  Good mapping
 Voting systems that allow you to select only one candidate for
President
Consistency When Consistency Breaks Down
 Design interfaces to have similar operations and use  What happens if there is more than one command
similar elements for achieving similar tasks starting with the same letter?
 E.g. save, spelling, select, style
 For example,
 always use ctrl key plus first initial of the command for an
 Have to find other initials or combinations of keys,
operation – ctrl+C, ctrl+S, ctrl+O thereby breaking the consistency rule
 E.g. ctrl+S, ctrl+Sp, ctrl+shift+L
 Main benefit is consistent interfaces are easier to
 Increases learning burden on user, making them more
learn and use prone to errors
 Users have to learn only a single mode of operation that is
applicable to all objects
 A design solution is to create categories of commands
that can be mapped into subsets of operations
 E.g. All commands that are concerned with file operations
(save, open, close) are placed together in the same file menu

Internal and External Consistency Keypad Numbers Layout

 Internal consistency refers to designing operations to  A case of external inconsistency
behave the same within an application
 But, difficult to achieve with complex interfaces
 External consistency refers to designing operations,
(a) phones, remote controls (b) calculators, computer keypads
interfaces, etc., to be the same across applications and
devices 1 2 7 8 9
3
 Very rarely the case, based on different designer’s preference
4 5 6 4 5 6

7 8 9 1 2 3

0 0
Consistency Heuristics
 Poor consistency  Design principles commonly referred to as heuristics
 Boeing 757 Flight Management System almost always selected  Interpreted in the design context, drawing on past experience
intended beacon when entering first letter of, how to design feedback and what it means for something
 Good consistency to be consistent
 Home button in web browsers always takes you home, no  Usability Principles [Nielsen, 2001]
matter what page you are looking at  Visibility of system status
 Match between system and the real world
 User control and freedom
 Consistency and standards
 Help user recognize, diagnose, and recover from errors
 Error prevention
 Recognition rather than recall
 Flexibility and efficiency of use
 Aesthetic and minimalist design
 Help and documentation

Heuristics Heuristics
 Visibility of system status  Help users recognize, diagnose, recover from errors
 Keep users informed about what is going on, through  Use feedback, visible system status, undo
providing appropriate feedback within reasonable time  Error prevention
 Match between system and real world  Make it difficult for errors to occur
 Speak user’s language rather than system-oriented language  Recognition rather than recall
 User control and freedom  Make objects, actions, options visible
 User should feel in control  Flexibility and efficiency of use
 Stop technology from doing something
 Provide shortcuts for experts
 Undo
 Consistency and standards
 Avoid making users wonder whether different words,
situations or actions mean the same thing
Heuristics Reference
 Aesthetic and minimalist design  Preece, Rogers & Sharp, Interaction Design: Beyond Human-
 Give more prominence to information and options more likely Computer Interaction (Ch1)
to be used  Norman, The Design of Everyday Things
 Don’t waste space showing rarely needed information  http://www.evl.uic.edu/aej/422/week01.html
 Use technology to reduce task complexity  http://www.baddesigns.com/
 Help and documentation  https://www.amazon.com/dp/0465050654?tag=useitcomusablein
 Easy to search
 Provide concrete steps