Interaction design buttons
This presentation is the property of its rightful owner.
Sponsored Links
1 / 43

Interaction Design Buttons PowerPoint PPT Presentation


  • 45 Views
  • Uploaded on
  • Presentation posted in: General

Interaction Design Buttons. Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven [email protected] 21-AUG-2005. Key references/literature:. D. Norman (1988) The psychology of everyday things. Basic Books. chapter 1

Download Presentation

Interaction Design Buttons

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Interaction design buttons

Interaction DesignButtons

Prof. Dr. Matthias Rauterberg

Faculty Industrial Design

Technical University Eindhoven

[email protected]

21-AUG-2005


Key references literature

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


What is user system interaction about

What is User-System Interaction about?

Working domain

Goal:

Actual Performance

=>

Desired Performance

Working system

user

system

(c) M. Rauterberg, TU/e


Interface design or interaction design

Interface Design or Interaction Design?

user

interaction

system

(c) M. Rauterberg, TU/e


Trend in interface design

Trend in Interface Design

(c) M. Rauterberg, TU/e


Interaction design buttons

The function-form mapping

perceivable user

interface

forms

implemented

functions

perceived

semantic

intended

semantic

DMM := designer’s mental model

UMM := user’s mental model

(c) M. Rauterberg, TU/e


The three important mappings

The three important mappings

User’s world

device

pixel world

semantic

function-1

function-2

function-3

function-n

(c) M. Rauterberg, TU/e


Interaction design buttons

User-System

Mapping

Feed-back

Feed-forward

[background: M. Frese & J. Sabini (1985, eds.) Goal Directed Behavior: the concept of action in psychology. LEA]

(c) M. Rauterberg, TU/e


The hardware control pixel world mapping 2

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


The hardware control pixel world mapping 21

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.

  • 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

[taken from http://www.jegsworks.com/Lessons/lesson3/lesson3-3.htm]


The hardware control pixel world mapping 3

The ‘hardware control’-’pixel world’ mapping (3)

Nature of function

(c) M. Rauterberg, TU/e


Pros and cons of pointing devices

Pros and Cons of Pointing Devices

(c) M. Rauterberg, TU/e


Button function mapping 1

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


Button function mapping 2

Button-Function Mapping (2)

Examples from

http://edocs.bea.com/wlintegration/v2_1/devplug/appgui.htm

(c) M. Rauterberg, TU/e


How to design the context of button use

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


Button control design recommendations

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


    The concept of natural mappings

    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


    Design of light switch panels 1

    Design of Light Switch Panels (1)

    • Problem:

      • no direct mapping between switches and corresponding lamps

    [source: Norman, D., 1988]

    (c) M. Rauterberg, TU/e


    Design of light switch panels 2

    Design of Light Switch Panels (2)

    [source: Norman, D., 1988]

    (c) M. Rauterberg, TU/e


    Corrective design 1

    Corrective Design (1)

    • Problem:

      • sliding door can damage the open petrol flap

    [source: Norman, D., 1988]

    (c) M. Rauterberg, TU/e


    Corrective design 2

    Corrective Design (2)

    • Solution:

      • extra bar to lock the sliding door

    [source: Norman, D., 1988]

    (c) M. Rauterberg, TU/e


    Design of door handles

    Design of Door Handles

    [source: Norman, D., 1988]

    (c) M. Rauterberg, TU/e


    Design of shower faucets

    Design of Shower Faucets

    • Natural mapping:

      • hot water left sideor RED

      • cold water right sideor BLUE

    • Un-natural mapping:

      • something else(see figure)

    [source: Norman, D., 1988]

    (c) M. Rauterberg, TU/e


    Natural mapping 1

    Natural Mapping (1)

    [source: Norman, D., 1988]

    (c) M. Rauterberg, TU/e


    Natural mapping 2

    Natural Mapping (2)

    [source: Norman, D., 1988]

    (c) M. Rauterberg, TU/e


    The most important design principle

    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!

    [source: Rauterberg 1995]

    (c) M. Rauterberg, TU/e


    Design of stove controls 1

    Design of Stove Controls (1)

    [source: Norman, D., 1988]

    (c) M. Rauterberg, TU/e


    Design of stove controls 2

    Design of Stove Controls (2)

    [source: Norman, D., 1988]

    (c) M. Rauterberg, TU/e


    Interaction design buttons

    Interactive Directness: the desktop example

    Pull down menus

    Pull down menus

    Toolbar

    [source: Rauterberg 1995]

    (c) M. Rauterberg, TU/e


    Interaction design buttons

    action space

    [source: Rauterberg 1995]

    perception space

    (c) M. Rauterberg, TU/e


    Explicit versus implicit design

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

    • [see in the book of Jakob Nielsen, HyperText & HyperMedia, 1990, Academic Press, p. 136]

    (c) M. Rauterberg, TU/e


    Implicit design screen from inigo gets out

    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


    Explicit screen design

    Explicit Screen Design

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

    (c) M. Rauterberg, TU/e


    Implicit screen design

    Implicit Screen Design

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

    (c) M. Rauterberg, TU/e


    The concept of perceptual attractors

    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


    A design concept for visual attractors

    A design concept for visual attractors

    (c) M. Rauterberg, TU/e


    Corrective design 11

    Corrective Design (1)

    (c) M. Rauterberg, TU/e


    Corrective design 21

    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


    Corrective design 3

    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


    Assignment 1 team 1

    Assignment-1 (team-1)

    • 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


    Assignment 2 team 2

    Assignment-2 (team-2)

    • 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


    Assignment 3 team 3

    Assignment-3 (team-3)

    • 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


    Assignment 4 team 4

    Assignment-4 (team-4)

    • Implicit designed Web-pages:

    • 1) get an internet connection;

    • 2) surf and search for different web-pages 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


  • Login