Interaction Design Buttons Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical 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? system user Working domain Working system Goal: Actual Performance => Desired Performance

(c) M. Rauterberg, TU/e 4 Interface Design or Interaction Design? userinteractionsystem

(c) M. Rauterberg, TU/e 5 Trend in Interface Design

(c) M. Rauterberg, TU/e 6 The function-form mapping implemented functions perceivable user interface forms intended semantic perceived semantic DMM := designer’s mental model UMM := user’s mental model

(c) M. Rauterberg, TU/e 7 The three important mappings User’s worlddevicepixel worldsemantic function-1 function-2 function-3 … function-n

(c) M. Rauterberg, TU/e 8 Feed-forwardFeed-back User-System Mapping

(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 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 11 The ‘hardware control’-’pixel world’ mapping (3) Nature of function

(c) M. Rauterberg, TU/e 12 Pros and Cons of Pointing Devices

(c) M. Rauterberg, TU/e 13 Button-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

(c) M. Rauterberg, TU/e 14 Button-Function Mapping (2) Examples from

(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

(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 side or RED –cold water right side or 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 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

(c) M. Rauterberg, TU/e 34 Implicit Screen Design [taken from

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