Interaction Design
Buttons
Prof. Dr. Matthias Rauterberg
Faculty Industrial Design
Technical University Eindhoven
g.w.m.rauterberg@tue.nl
04-DEC-2004
Key references/literature:
D. Norman (1988) The psychology of everyday things. Basic Books.
chapter 1
D.J. Mayhew (1992) Principles and guidelines in Software User
Interface Design. Prentice Hall.
chapter 1: introduction;
chapter 12: input and output devices.
J. Preece, Y. Rogers, H. Sharp (2002) Interaction design-beyond humancomputer interaction. John Wiley&Sons.
chapter 1: what is interaction design?
chapter 2: understanding and conceptualizing interaction.
(c) M. Rauterberg, TU/e
2
What is User-System Interaction about?
Working domain
Goal:
Actual Performance
=>
Desired Performance
Working system
user
(c) M. Rauterberg, TU/e
system
3
Interface Design or Interaction Design?
user
(c) M. Rauterberg, TU/e
interaction
system
4
Trend in Interface Design
150
100
SW controls
HW controls
50
0
1970-1990
(c) M. Rauterberg, TU/e
1990-2010
2010-
5
The function-form mapping
implemented
functions
intended
semantic
DMM := designer’s mental model
(c) M. Rauterberg, TU/e
perceivable
user
interface
forms
perceived
semantic
UMM := user’s mental model
6
The three important mappings
User’s world
device
pixel world
semantic
function-1
function-2
function-3
…
function-n
(c) M. Rauterberg, TU/e
7
the complete action cycle
User-System
Mapping
task(s)
goal-, subgoal-setting
Feed-back
Feed-forward
planning of execution
feedback
control of
action
selection of means
mental operation
synchronisation
in space
physical operation
synchronisation in time
(c) M. Rauterberg, TU/e
8
The ‘hardware control’-’pixel world’ mapping (2)
Input devices
are the hardware components you use to "talk" to a computer. You use them to place requests, send
messages (to the computer or to other people), move around in virtual worlds, or even shoot at "enemies" in
some computer games. A few examples of commonly used input devices are:
Computer keyboard
Joystick
Microphone
Mouse
Pen (some with, some without, a pad)
Touch-sensitive screen
Trackball
TrackPoint
(c) M. Rauterberg, TU/e
9
The ‘hardware control’-’pixel world’ mapping (2)
• Mouse
Advantage: Moves cursor around the screen faster than using keystrokes.
Disadvantage: Requires moving hand from keyboard to mouse and back. Repeated motion can lead to carpal tunnel syndrome.
• Trackball
Advantage: Does not need as much desk space as a mouse. Is not as tiring since less motion is needed.
Disadvantage: Requires fine control of the ball with just one finger or thumb. Repeated motions of the same muscles is tiring
and can cause carpal tunnel syndrome.
• Glidepad
Advantage: Does not need as much desk space as a mouse. Can readily be built into the keyboard. Has finer resolution. That is,
to achieve the same cursor movement onscreen takes less movement of the finger on the glidepad than it does mouse movement.
Can use either buttons or taps of the pad for clicking.
Disadvantage: The hand tires faster than with a mouse since there is no support. Some people don't find the motion as natural as
a mouse.
• Pen
Advantage: Can use handwriting instead of typing. Can use gestures instead of typing commands small size.
Disadvantage: Must train device to recognize handwriting. Must learn gestures or train device to recognize the ones you create.
Can lose the pen which is not usually attached to the device.
• Touchscreen
Advantage: It's natural to do - reach out and touch something.
Disadvantage: It's tiring if many choices must be made. It takes a lot of screen space for each choice since fingers are bigger
than cursors.
• Graphic tablet
Advantage: Don't have to redraw graphics already created.
Disadvantage: Expensive.
(c) M. Rauterberg, TU/e
10
[taken from http://www.jegsworks.com/Lessons/lesson3/lesson3-3.htm]
The ‘hardware control’-’pixel world’ mapping (3)
Nature of function
discrete
continuous
'button'
Appropriate
NOT appropriate
e.g. Cursor keys
Linear (1D)
possible
Appropriate
e.g. wheel control on mouse
Surface (2D)
Possible
e.g. mouse button for selection
Appropriate
e.g. pen for handwriting, painting
Space (3D)
NOT appropriate
Appropriate
e.g. dataglove, datasuite
(c) M. Rauterberg, TU/e
11
Pros and Cons of Pointing Devices
Cursor
keys
Mouse
Joy stick
Trackball
Touch
screen
Touch pad
Speed
Slow
Fast
Medium
Medium
Fast
medium
Accuracy
High
Medium
Medium
High
Low
Medium
Speed
control
Some
Yes
Some
Yes
Yes
Yes
Yes
Soe
Yes
Yes
Yes
Continuous No
movement
Fatigue
Low
Medium
Medium
Medium
High
Medium
Directness
Direction
Direction,
distance,
speed
Direction
Direction,
speed
Direction,
distance,
speed
Direction,
distance,
speed
Best uses
Cursor
Cursor,
point,
select,
draw,
drag
Cursor,
point,
select,
track,
drag
Cursor,
Point,
point,
select
select, track
(c) M. Rauterberg, TU/e
Point, select
12
Button-Function Mapping (1)
Recommended Controls for Functions
Function Category
Control
Selecting mutually exclusive options
Selecting non-exclusive options
Performing an action
Selecting an item from a set
Entering or viewing large amounts
of information at the same time
Setting attribute values
Radio buttons
Check boxes
Command buttons
List boxes or drop-down list boxes
(c) M. Rauterberg, TU/e
Tables
Text-entry fields
13
Button-Function Mapping (2)
Examples from
http://edocs.bea.com/wlintegration/v2_1/devplug/appgui.htm
(c) M. Rauterberg, TU/e
14
How to design the context of button-use?
• device wide: e.g. mouse buttons
• platform wide: e.g. APPLE, MS, etc look and feel
• application wide: e.g. MS word, ADOBE photoshop
• window wide: e.g. pull-down menu
• dialog box wide: e.g. ADD, DELETE, OK, CANCEL etc
(c) M. Rauterberg, TU/e
15
Button/control design recommendations
Control Placement
Place the most frequently accessed controls near the bottom of the form. The user interacts most often
with the output area, with the icons in the output area, and with the hard keys on the system. Placing
controls at the bottom of the output area/form puts them as close as possible to the output area,
making them quicker and easier to access.
People from Western cultures tend to read the screen from top to bottom and left to right. Therefore,
anything important for users to read (rather than interact with) should be near the top of the output
area/form. Horizontally, you should arrange controls so that the leftmost control is the most important.
Do not clutter the screen. Running out of space is a usually a sign that simplification is needed.
Squashing a lot of controls on the form by reducing white space is usually the wrong answer.
In most cases, use spacing instead of lines and boxes to separate user interface elements into logical
groups. Lines and boxes add to screen clutter and actually make a small screen harder to read.
Labels
Provide a label for any control or option that requires further explanation. Right justify the labels and
left justify the fields. Use bold font and title capitalization for labels. That is, capitalize the first letter of
each important word in the label in the same way you would capitalize the title of a book. For example,
use "Set Date" as a label, not "Set date." Never use all lowercase ("set date") or all uppercase ("SET
DATE") for labels.
[updated from http://www.palmos.com/dev/support/docs/ui/UIGuide_Front.html]
(c) M. Rauterberg, TU/e
16
The Concept of Natural Mappings
• Definition [see Norman, D., 1988, p. 75ff]:
– A design solution based on a natural mappings reduces the
need for additional explanatory information in memory!
– Natural mappings guarantee a minimum number of
cognitive transformation steps.
– If a design depends upon labels, it may be faulty. Labels
are important and often necessary, but the appropriate use
of natural mappings can minimize the need for them.
Wherever labels seem necessary, consider another design!
(c) M. Rauterberg, TU/e
17
Design of Light Switch Panels (1)
• Problem:
– no direct mapping between
switches and corresponding
lamps
(c) M. Rauterberg, TU/e
18
Design of Light Switch Panels (2)
(c) M. Rauterberg, TU/e
19
Corrective Design (1)
• Problem:
– sliding door can
damage the open
petrol flap
(c) M. Rauterberg, TU/e
20
Corrective Design (2)
• Solution:
– extra bar to
lock the
sliding door
(c) M. Rauterberg, TU/e
21
Design of Door Handles
(c) M. Rauterberg, TU/e
22
Design of Shower Faucets
• Natural mapping:
– hot water left side
or RED
– cold water right side
or BLUE
• Un-natural mapping:
– something else
(see figure)
(c) M. Rauterberg, TU/e
23
Natural Mapping (1)
(c) M. Rauterberg, TU/e
24
Natural Mapping (2)
(c) M. Rauterberg, TU/e
25
The most important design principle
• Perception Space
– The physical space where
the user’s attention is.
• Action Space
– The physical space where
the user acts in.
• Design Principle:
– perception space and action
space must coincide!
(c) M. Rauterberg, TU/e
26
Design of Stove Controls (1)
(c) M. Rauterberg, TU/e
27
Design of Stove Controls (2)
(c) M. Rauterberg, TU/e
28
Interactive Directness: the desktop example
Pull down menus
Pull down menus
Toolbar
(c) M. Rauterberg, TU/e
29
action space
perception space
(c) M. Rauterberg, TU/e
30
Explicit versus Implicit Design
• This design concept for
a specific screen of the
hypercard stack “Inigo
Gets Out” is based on
explicit design: only
two buttons are used for
navigation (--> forward,
<-- backward).
(c) M. Rauterberg, TU/e
31
Implicit Design: screen from “Inigo Gets Out”
(c) M. Rauterberg, TU/e
•
This screen is based on implicit
design and has a second-person
perspective: to get the cat to run to
the right, you click on the cat itself.
The actual image from “Inigo Gets
Out” has been overlaid with data
(the click markers) from a field
study of the use of the system in a
Copenhagen kindergarten.
•
[see in the book of Jakob Nielsen, HyperText &
HyperMedia, 1990, Academic Press, p. 136]
32
Explicit Screen Design
[taken from http://all-search.8m.com/]
(c) M. Rauterberg, TU/e
33
Implicit Screen Design
[taken from http://www.ferrari-deutschland.de/]
(c) M. Rauterberg, TU/e
34
The Concept of Perceptual Attractors
• To guide the users attention
on the interface, each visual
attractor (=any separate
perceivable structure) is of
crucial importance, so use
them carefully in your
design to avoid not intended
distractions.
• Consequence: you will end
up with a slim design!
(c) M. Rauterberg, TU/e
35
A design concept for visual attractors
(c) M. Rauterberg, TU/e
36
Corrective Design (1)
(c) M. Rauterberg, TU/e
37
Corrective Design (2)
To motivate users to
switch from explicit
to implicit an
additional explicit
instruction is
necessary:
“Tippen Sie auf eines der ECSymbole”
[“touch on one of the EC symbols”]
(c) M. Rauterberg, TU/e
38
Corrective Design (3)
•
•
One major problem of a
mixed style (explicit plus
implicit) is that nearly all
users are not able to switch
from the buttons (explicit)
to the picture with touch
sensitive areas (implicit).
To overcome this problem
an extra explicit instruction
is necessary:
“Waehlen Sie die gewuenschte Region
durch Beruehren”
[“select the desired region by touching”]
button area
(c) M. Rauterberg, TU/e
39
Assignment-1 (1 group a 5)
• Input controls for computer systems:
• 1) get an internet connection;
• 2) surf and search for different input devices for computer
systems;
• 3) describe the different ‘control-button/function’ mappings
and classify them;
• 4) discuss the different types and pros/cons of ‘controlbutton/function’ mappings;
• 5) prepare a presentation of about 10 min.
(c) M. Rauterberg, TU/e
40
Assignment-2 (1 group a 5)
• Input controls for home consumer products:
• 1) get a digital camera;
• 2) go out to a shop of home consumer products and collect
pictures of a variety of different buttons and a description of
their semantic;
• 3) come back, describe the different ‘button-function’ mappings
and classify them;
• 4) discuss the different types and pros/cons of ‘controlbutton/function’ mappings;
• 5) prepare a presentation of about 10 min.
(c) M. Rauterberg, TU/e
41
Assignment-3 (1 group a 5)
• Input controls of a ‘phone answering machine’:
• 1) read the chapter 1 and 2 of ‘interaction design’;
• 2) describe the basic functionality of a phone answering
machine;
• 3) design two different solutions for all input controls;
• 4) discuss the different types and pros/cons of ‘controlbutton/function’ mappings;
• 5) prepare a presentation of about 10 min.
(c) M. Rauterberg, TU/e
42
Assignment-4 (1 group a 5)
• Implicit designed Webpages:
• 1) get an internet connection;
• 2) surf and search for different webpages which are based on implicit
design [area := mouse sensitive area];
• 3) describe the different ‘area-function’ mappings and classify them;
• 4) discuss the different types and pros/cons of ‘area-function’
mappings;
• 5) prepare a presentation of about 10 min.
(c) M. Rauterberg, TU/e
43