Title: Interaction Design Buttons
1Interaction DesignButtons
- Prof. Dr. Matthias Rauterberg
- Faculty Industrial Design
- Technical University Eindhoven
- g.w.m.rauterberg_at_tue.nl
04-DEC-2004
2Key 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 human-computer
interaction. John WileySons. chapter 1 what is
interaction design? chapter 2 understanding and
conceptualizing interaction.
3What is User-System Interaction about?
Working domain
Goal Actual Performance gt Desired Performance
Working system
user
system
4Interface Design or Interaction Design?
user
interaction
system
5Trend in Interface Design
6The function-form mapping
perceivable user interface forms
implemented functions
perceived semantic
intended semantic
DMM designers mental model
UMM users mental model
7The three important mappings
Users world
device
pixel world
semantic
function-1 function-2 function-3 function-n
8User-System Mapping
Feed-forward
Feed-back
9The 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
10The 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. - TrackballAdvantage 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. - GlidepadAdvantage 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. - PenAdvantage 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. - TouchscreenAdvantage 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 tabletAdvantage Don't have to redraw
graphics already created. Disadvantage
Expensive.
taken from http//www.jegsworks.com/Lessons/lesso
n3/lesson3-3.htm
11The hardware control-pixel world mapping (3)
Nature of function
12Pros and Cons of Pointing Devices
13Button-Function Mapping (1)
Recommended Controls for Functions Function
Category
Control Selecting mutually exclusive options
Radio buttons Selecting non-exclusive options
Check boxes Performing an action
Command
buttons Selecting an item from a set
List boxes or drop-down list
boxes Entering or viewing large amounts of
information at the same time
Tables Setting attribute values
Text-entry fields
14Button-Function Mapping (2)
Examples from http//edocs.bea.com/wlintegration/v
2_1/devplug/appgui.htm
15How 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
16Button/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/UIG
uide_Front.html
17The 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!
18Design of Light Switch Panels (1)
- Problem
- no direct mapping between switches and
corresponding lamps
19Design of Light Switch Panels (2)
20Corrective Design (1)
- Problem
- sliding door can damage the open petrol flap
21Corrective Design (2)
- Solution
- extra bar to lock the sliding door
22Design of Door Handles
23Design of Shower Faucets
- Natural mapping
- hot water left sideor RED
- cold water right sideor BLUE
- Un-natural mapping
- something else(see figure)
24Natural Mapping (1)
25Natural Mapping (2)
26The most important design principle
- Perception Space
- The physical space where the users attention is.
- Action Space
- The physical space where the user acts in.
- Design Principle
- perception space and action space must coincide!
27Design of Stove Controls (1)
28Design of Stove Controls (2)
29Interactive Directness the desktop example
Pull down menus
Pull down menus
Toolbar
30action space
perception space
31Explicit 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 (--gt forward, lt-- backward).
32Implicit Design screen from Inigo Gets Out
- 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
33Explicit Screen Design
taken from http//all-search.8m.com/
34Implicit Screen Design
taken from http//www.ferrari-deutschland.de/
35The 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!
36A design concept for visual attractors
37Corrective Design (1)
38Corrective Design (2)
To motivate users to switch from explicit to
implicit an additional explicit instruction is
necessary Tippen Sie auf eines der
EC-Symboletouch on one of the EC symbols
39Corrective 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 Beruehrenselect the
desired region by touching
button area
40Assignment-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
control-button/function mappings - 5) prepare a presentation of about 10 min.
41Assignment-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
control-button/function mappings - 5) prepare a presentation of about 10 min.
42Assignment-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
control-button/function mappings - 5) prepare a presentation of about 10 min.
43Assignment-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.