Interaction Design Buttons Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical...
-
Upload
esther-mcgee -
Category
Documents
-
view
216 -
download
0
Transcript of Interaction Design Buttons Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical...
Interaction DesignButtons
Prof. Dr. Matthias RauterbergFaculty Industrial DesignTechnical University Eindhoven
04-DEC-2004
(c) M. Rauterberg, TU/e 2
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 human-computer interaction. John Wiley&Sons.
chapter 1: what is interaction design?chapter 2: understanding and conceptualizing interaction.
(c) M. Rauterberg, TU/e 3
What is User-System Interaction about?
systemuser
Working domain
Working system
Goal:Actual Performance=> Desired Performance
(c) M. Rauterberg, TU/e 4
Interface Design or Interaction Design?
user interaction system
(c) M. Rauterberg, TU/e 5
Trend in Interface Design
0
50
100
150
1970-1990 1990-2010 2010-
SW controlsHW controls
(c) M. Rauterberg, TU/e 6
The function-form mapping
implementedfunctions
perceivable userinterfaceforms
intendedsemantic
perceivedsemantic
DMM := designer’s mental model UMM := user’s mental model
(c) M. Rauterberg, TU/e 7
The three important mappings
User’s world device pixel world semantic
function-1function-2function-3…function-n
(c) M. Rauterberg, TU/e 8
physical operation
feedback control of action
goal-, subgoal-setting
mental operation
task(s)
planning of execution selection of means
the complete action cycle
synchronisation in time
synchronisation in space
Feed-forwardFeed-back
User-SystemMapping
(c) M. Rauterberg, TU/e 9
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 10
The ‘hardware control’-’pixel world’ mapping (2)
[taken from http://www.jegsworks.com/Lessons/lesson3/lesson3-3.htm]
• 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.
(c) M. Rauterberg, TU/e 11
The ‘hardware control’-’pixel world’ mapping (3)
discrete continuous
'button' Appropriate NOT appropriatee.g. Cursor keys
Linear (1D) possible Appropriatee.g. wheel control on mouse
Surface (2D) Possiblee.g. mouse button for selection
Appropriatee.g. pen for handwriting, painting
Space (3D) NOT appropriate Appropriatee.g. dataglove, datasuite
Nature of function
(c) M. Rauterberg, TU/e 12
Pros and Cons of Pointing DevicesCursorkeys
Mouse Joy stick Trackball Touchscreen
Touch pad
Speed Slow Fast Medium Medium Fast medium
Accuracy High Medium Medium High Low Medium
Speedcontrol
Some Yes Some Yes Yes Yes
Continuousmovement
No Yes Soe Yes Yes Yes
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,select, track
Point,select
Point, select
(c) M. Rauterberg, TU/e 13
Button-Function Mapping (1)Recommended Controls for Functions
Function Category Control
Selecting mutually exclusive options Radio buttonsSelecting non-exclusive options Check boxesPerforming an action Command buttonsSelecting an item from a set List boxes or drop-down list boxesEntering or viewing large amounts of information at the same time TablesSetting attribute values Text-entry fields
(c) M. Rauterberg, TU/e 14
Button-Function Mapping (2)
Examples fromhttp://edocs.bea.com/wlintegration/v2_1/devplug/appgui.htm
(c) M. Rauterberg, TU/e 15
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 16
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 17
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 18
Design of Light Switch Panels (1)• Problem:
– no direct mapping between switches and corresponding lamps
(c) M. Rauterberg, TU/e 19
Design of Light Switch Panels (2)
(c) M. Rauterberg, TU/e 20
Corrective Design (1)• Problem:
– sliding door can damage the open petrol flap
(c) M. Rauterberg, TU/e 21
Corrective Design (2)
• Solution:– extra bar to
lock the sliding door
(c) M. Rauterberg, TU/e 22
Design of Door Handles
(c) M. Rauterberg, TU/e 23
Design of Shower Faucets• Natural mapping:
– hot water left sideor RED
– cold water right sideor BLUE
• Un-natural mapping:– something else
(see figure)
(c) M. Rauterberg, TU/e 24
Natural Mapping (1)
(c) M. Rauterberg, TU/e 25
Natural Mapping (2)
(c) M. Rauterberg, TU/e 26
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 27
Design of Stove Controls (1)
(c) M. Rauterberg, TU/e 28
Design of Stove Controls (2)
(c) M. Rauterberg, TU/e 29
Interactive Directness: the desktop example
Pull down menus
Pull down menus
Toolbar
(c) M. Rauterberg, TU/e 30
action space
perception space
(c) M. Rauterberg, TU/e 31
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 32
Implicit 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]
(c) M. Rauterberg, TU/e 33
Explicit Screen Design
[taken from http://all-search.8m.com/]
(c) M. Rauterberg, TU/e 34
Implicit Screen Design
[taken from http://www.ferrari-deutschland.de/]
(c) M. Rauterberg, TU/e 35
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 36
A design concept for visual attractors
(c) M. Rauterberg, TU/e 37
Corrective Design (1)
(c) M. Rauterberg, TU/e 38
Corrective Design (2)
To motivate users to switch from explicit to implicit an additional explicit instruction is necessary: “Tippen Sie auf eines der EC-Symbole”[“touch on one of the EC symbols”]
(c) M. Rauterberg, TU/e 39
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 40
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 ‘control-button/function’ mappings;
• 5) prepare a presentation of about 10 min.
(c) M. Rauterberg, TU/e 41
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 ‘control-button/function’ mappings;
• 5) prepare a presentation of about 10 min.
(c) M. Rauterberg, TU/e 42
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 ‘control-button/function’ mappings;
• 5) prepare a presentation of about 10 min.
(c) M. Rauterberg, TU/e 43
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.