Interaction Styles SE3830 Jay Urbain, PhD Credits: Donald Norman, - - PowerPoint PPT Presentation

Interaction Styles

SE3830 Jay Urbain, PhD

Credits: Donald Norman, Design of Everyday Things Ben Shneiderman, Catherine Plaisant, Roger J. Chapman, Designing the User Interface.

• Prof. Robert Miller, MIT Department of Electrical Engineering

and Computer Science.

1

Hall of fame or shame?

2

Hall of shame?

• IBM’s RealCD is CD player software.
• Why is it called “Real”?

– Designers based it on a real-world object: a plastic CD.

• This interface has a metaphor, an analogue in the real
• world. What is it?
• Metaphors are one way to make an interface “intuitive.”
• Users can relate what they already know about the

interface’s metaphor.

3

Hall of shame?

Unfortunately, the designers’ careful adherence to this metaphor produced some remarkable effects, none of them good!

• Use a toggle button control (the button with two little gray

squares on it) to open the case and access controls for volume, listing tracks, etc.

• A task analysis would show that adjusting the volume or

picking a particular track matters more than viewing the cover art.

• Bottom line:

– Learnability comes from more than just metaphor.

4

Hall of shame?

• UI is dominated by non-functional artwork.
• Problem with the choice of metaphor: a CD case doesn’t

actually play CDs.

• The designers had to find a place for the player controls

– which, serve the primary task of the interface – so they aligned them vertically.

• The metaphor is dictating control layout, against all other

considerations.

• Over-adherence to the metaphor drove the designers to

disregard all consistency with other desktop applications. – Where is this window’s close box? How do I shut it down?

5

Hall of shame?

6

Topics

• Conceptual models
• Interaction styles

– Direct manipulation – Menus – Command

• Errors
• Metaphors

7

Conceptual Models

• A metaphor, like the CD case, is an example of a

conceptual model.

• Your job as a user interface designer boils down to:

1. choosing the right conceptual model and 2. teaching it successfully to the user.

8

Models

• Model of a system = how it works

– its constituent parts and how they work – together to do what the system does – Implementation models

• Pixel editing vs. structured graphics
• Text file as single string vs. list of lines

– Interface models

• Line versus WYSIWYG Editor
• Paint versus PhotoShop.

9

Interface Model Hides System Model

• Interface model should be:

– Simple – Appropriate – Reflect user’s model of the task (learned from task analysis) – Well-communicated

10

Interface Model Hides System Model

• Interface model might be quite different from the system

model.

• A text editor whose system model is a list of lines doesn’t

have to present it that way through its interface.

• A cell phone presents the same simple interface model as a

conventional wired phone, even though its system model is quite a bit more complex.

• This detail of the system model is hidden from the user.
• As a software engineer, you should be quite familiar with

this notion (abstraction).

11

User Model May Be Wrong

• Sometimes harmless

– Electricity as water

• Sometimes misleading

– Thermostat as a valve

12

User Model May Be Wrong but Useful

• The actual system model of household AC current is

completely different than a water hose.

• But the user model is simple, and the interface model

supports it: plug in this tube, and power flows to the appliance.

Norman, Design of Everyday Things, 1988.

13

User Model May Be Wrong but Misleading

Consider the household thermostat.

• If the room is too cold, what’s the fastest way to bring it up

to the desired temperature?

• Many people would say to turn the thermostat up to max

temperature.

• This response is triggered by an incorrect mental model

about how a thermostat works: – The timer model:

• The thermostat controls the duty cycle of the furnace.

– The valve model

• Thermostat affects the amount of heat coming from the furnace.

14

User Model May Be Wrong but Misleading

• Users have no problem understanding the model of a

dimmer switch, which performs an analogous function.

• When a room needs to be brighter, the user model says

to set the dimmer switch to the desired brightness.

• The problem here is that the thermostat isn’t effectively

communicating its model to the user.

• In particular, there isn’t enough feedback about what the

furnace is doing for the user to form the right model. What interface model would you use for a thermostat?

15

Interaction Styles

• Command language
• Menus & forms
• Direct manipulation

16

Command Language

• User types in commands in an artificial language
• Examples:

– Unix shell (“ls –l *.java”) – Search engine query language (“AND, OR, site:www.msoe.edu”) – URLs “http://www.msoe.edu/admissions”

• Command syntax is important

17

Command Language

• A command language is rarely the first choice of a user

interface designer nowadays, but they still have their place.

• Often used as an advanced feature embedded inside

another interaction style. Example:

– Google’s query operators form a command language. – Even the URL in a web browser is a command language, with particular syntax and semantics.

• When designing a command language, the key problem is

designing the command syntax.

– Task analysis drives the choice of commands, the names you give them, the parameters they have, and the syntax for fitting them together. – Consistency is key. – Autocomplete

18

Menus and Forms

• A menu/form interface presents a series of menus or

forms to the user.

• User is prompted to choose from menus and fill in forms.
• Meaningfully named items eliminate need to remember

commands and syntax.

• Examples

– Most web sites – Dialog boxes

• Navigation structure is important

– Menu trees (Yahoo!) – Wizard: linear sequence of forms

19

Menus and Form

• Dialog boxes are a form-style interface frequently found

embedded inside another interaction style.

• Task analysis tells us:

– what choices need to be available – where they should be placed in a menu tree – what data types or possible responses need to be available in a form – typically context sensitive Issues: – which menu to select, which category, etc. – tedium

20

Direct Manipulation

• User interacts with visual representation of data objects

– Continuous visual representation – Physical actions or labeled button presses – Rapid, incremental, reversible, immediately visible effects (immediate feedback)

• Examples:

– Files and folders on a desktop – Scrollbar – Dragging to resize a rectangle – Selecting text – Visual representation and physical interaction are important

21

Direct Manipulation

1) A continuous visual representation of the system’s data objects. Examples: – icons representing files and folders on your desktop; – graphical objects in a drawing editor; – text in a word processor; – email messages in your inbox.

• The representation may be verbal (words) or iconic

(pictures), but it’s continuously displayed.

• In contrast with the behavior of ed, a command-

language-style text editor

22

Direct Manipulation

• 2. The user interacts with the visual representation using

physical actions or labeled button presses. – Physical actions include clicking on an object to select it, dragging it to move it, or dragging a selection handle to resize it. – Physical actions are the most direct kind of actions in direct manipulation – you’re interacting with the virtual

• bjects in a way that feels like you’re pushing them

around directly. – Every interface function can not be easily mapped to a physical action (e.g., converting text to boldface), so we need to allow for “command” actions triggered by pressing a button.

23

Direct Manipulation

• 3. The effects of actions should be:
• rapid (within 100 ms),
• incremental (drag the scrollbar a little or a lot, and you

see each incremental change),

• reversible – with physical actions this is as easy as

moving your hand back to the original place; with labeled buttons you typically need an Undo command,

• and immediately visible.

24

Direct Manipulation

• Why is direct manipulation so powerful?

25

Direct Manipulation

• Why is direct manipulation so powerful?

– It exploits perceptual and motor skills of the human machine – and if done well, exploits their cognitive model.

26

Comparison of Interaction Styles

• Knowledge in the head vs. world
• Error messages
• Efficiency
• User experience
• Synchrony
• Programming difficulty
• Accessibility

27

Direct Manipulation Cues

• What cues do users rely on in order to learn a DM

model?, i.e., the parts that make up the interface, and how those parts work together.

• Interactions from physical objects:

– Affordances – Constraints – Natural mapping – Visibility – Feedback

28

Affordances

• Perceived or actual properties of a thing that determine

how the thing could be used

– Chair is for sitting – Knob is for turning – Button is for pushing – Listbox is for selection – Scrollbar is for continuous scrolling or panning

• Perceived vs. actual

– A facsimile of a chair made of paper-machine has a perceived affordance for sitting, but it doesn’t actually afford sitting. – Fire hydrant has no perceived affordance for sitting, but you can sit on it. – The parts of a user interface should agree in perceived and actual affordances.

29

Natural Mapping

• Logical constraints lead to another important principle of

interface communication: natural mapping of functions to controls.

• Physical arrangement of controls should match

arrangement of function

• Best mapping is direct, but natural mappings don’t have

to be direct – Light switch panel – Stove burners – Turn signals – Audio mixer – Tuner dial

30

Visibility

• Visibility is an essential principle – probably the most

important – in communicating a model to the user.

• Relevant parts of system should be visible

– Not usually a problem in the real world – But takes extra effort in computer interfaces

• A window can interpret mouse clicks anywhere in

its boundaries in arbitrary ways.

• The input need not be related at all to what is

being displayed.

31

Feedback

• Actions should have immediate, visible effects

– Push buttons – Scrollbars – Drag & drop

• Kinds of feedback

– Visual – Audio – Haptic

32

Modeling Human Error

• Description error
• Capture error
• Mode error
• Stop!

33

Description Error

• A description error occurs when two actions are very

similar.

• Intended action is replaced by another action with many

features in common - – Pouring orange juice into your cereal – Throwing shirt into toilet instead of hamper

• Avoid actions with very similar descriptions -

– Long rows of identical switches – Adjacent menu items that look similar

34

Capture Error

• Capture error occurs when a person starts executing one

sequence of actions, but then veers off into another.

• A sequence of actions is replaced by another sequence

that starts the same way – Leave your house and find yourself walking to school instead of where you meant to go. – Horse bridal path problem!

• Avoid habitual action sequences with common prefixes

35

Mode Error

• Modes are states in which the same action has different

meanings.

• Modes: states in which actions have different meanings
• Vi’s insert mode vs. command mode
• Caps Lock
• Drawing palette
• OpenGL programming
• Avoiding mode errors

– Eliminate modes – Visibility of mode – Spring-loaded or temporary modes – Disjoint action sets in different modes

36

Metaphors

• Metaphors - another way to address the model problem
• Examples

– Desktop – Trashcan

• The advantage of metaphor is that you’re borrowing a

conceptual model that the user already has experience with.

• A metaphor can convey a lot of knowledge about the

interface model all at once.

• It’s a notebook. It’s a CD case. It’s a desktop. It’s a

trashcan.

37

Dangers of Metaphors

• The basic rule for metaphors is: use it if you have one,

but don’t stretch for one if you don’t.

• Hard to find
• Deceptive
• Constraining
• Breaking the metaphor
• Use of a metaphor doesn’t excuse bad communication of

the model: – RealCD’s bad affordances, visibility

38

Menu Selection, Forms, and Dialogs

• When you cannot create appropriate direct-manipulation

strategies, menus and forms are attractive alternatives.

• Menus offer elicit clues to recognition, rather than

requiring users to recall command syntax.

39

Menu Selection, Forms, and Dialogs

• Necessary to consider and test for numerous design issues:

– task-related organization – phrasing of items – sequence of items – graphical layout and design – shortcuts – online help – error correction – selection mechanisms

40

Menu, Form, Dialog Guidelines

• Concentrate on organizing the structure and sequence of

menus to match the users' tasks, priorities, and environment.

– Ensure each menu is a meaningful, task related unit. – Favor broad and shallow hierarchical menus. – Use shortcuts, mouse-ahead, or dial-ahead options for frequent items. – Permit simple traversals to the previously displayed menu and to the main menu. – For restricted interactions, frequency of use may be more important than organizational grouping. – Conduct usability tests in the design process.

41

Task-Related Organization

Goal for menu, form, and dialog-box design: Create comprehensible, memorable, and convenient organization relevant to the user's task.“ STOP

42

Summary

• Concentrate on organizing the structure and sequence
• f menus to match the users' tasks, priorities, and

environment.

• Ensure each menu is a meaningful, task related unit .
• Favor broad and shallow hierarchical menus.
• Use shortcuts, mouse-ahead, or dial-ahead options for

frequent items.

• Permit simple traversals to the previously displayed

menu and to the main menu.

• For restricted interactions, frequency of use may be

more important than organizational grouping.

• Conduct usability tests in the design process.

43