Interaction Design Buttons Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven [email protected] 04-DEC-2004

Interaction DesignButtons

Prof. Dr. Matthias RauterbergFaculty Industrial DesignTechnical University Eindhoven

[email protected]

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.


What is User-System Interaction about?

systemuser

Working domain

Working system

Goal:Actual Performance=> Desired Performance


Interface Design or Interaction Design?

user interaction system


Trend in Interface Design

0

50

100

150

1970-1990 1990-2010 2010-

SW controlsHW controls


The function-form mapping

implementedfunctions

perceivable userinterfaceforms

intendedsemantic

perceivedsemantic

DMM := designer’s mental model UMM := user’s mental model


The three important mappings

User’s world device pixel world semantic

function-1function-2function-3…function-n


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


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



[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.



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


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


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


Button-Function Mapping (2)

Examples fromhttp://edocs.bea.com/wlintegration/v2_1/devplug/appgui.htm


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


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]


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!


Design of Light Switch Panels (1)• Problem:

– no direct mapping between switches and corresponding lamps


Design of Light Switch Panels (2)


Corrective Design (1)• Problem:

– sliding door can damage the open petrol flap


Corrective Design (2)

• Solution:– extra bar to

lock the sliding door


Design of Door Handles


Design of Shower Faucets• Natural mapping:

– hot water left sideor RED

– cold water right sideor BLUE

• Un-natural mapping:– something else

(see figure)


Natural Mapping (1)


Natural Mapping (2)


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!


Design of Stove Controls (1)


Design of Stove Controls (2)


Interactive Directness: the desktop example

Pull down menus

Pull down menus

Toolbar


action space

perception space


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).


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]


Explicit Screen Design

[taken from http://all-search.8m.com/]


Implicit Screen Design

[taken from http://www.ferrari-deutschland.de/]


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!


A design concept for visual attractors





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”]



• 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


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.



• 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;





• 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;





• 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;


Documents

Interaction Design Buttons Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven [email protected] 04-DEC-2004