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

interaction styles
SMART_READER_LITE
LIVE PREVIEW

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 1


slide-1
SLIDE 1

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

slide-2
SLIDE 2

Hall of fame or shame?

2

slide-3
SLIDE 3

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

slide-4
SLIDE 4

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

slide-5
SLIDE 5

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

slide-6
SLIDE 6

Hall of shame?

6

slide-7
SLIDE 7

Topics

  • Conceptual models
  • Interaction styles

– Direct manipulation – Menus – Command

  • Errors
  • Metaphors

7

slide-8
SLIDE 8

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

slide-9
SLIDE 9

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

slide-10
SLIDE 10

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

slide-11
SLIDE 11

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

slide-12
SLIDE 12

User Model May Be Wrong

  • Sometimes harmless

– Electricity as water

  • Sometimes misleading

– Thermostat as a valve

12

slide-13
SLIDE 13

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

slide-14
SLIDE 14

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

slide-15
SLIDE 15

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

slide-16
SLIDE 16

Interaction Styles

  • Command language
  • Menus & forms
  • Direct manipulation

16

slide-17
SLIDE 17

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

slide-18
SLIDE 18

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

slide-19
SLIDE 19

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

slide-20
SLIDE 20

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

slide-21
SLIDE 21

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

slide-22
SLIDE 22

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

slide-23
SLIDE 23

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

slide-24
SLIDE 24

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

slide-25
SLIDE 25

Direct Manipulation

  • Why is direct manipulation so powerful?

25

slide-26
SLIDE 26

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

slide-27
SLIDE 27

Comparison of Interaction Styles

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

27

slide-28
SLIDE 28

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

slide-29
SLIDE 29

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

slide-30
SLIDE 30

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

slide-31
SLIDE 31

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

slide-32
SLIDE 32

Feedback

  • Actions should have immediate, visible effects

– Push buttons – Scrollbars – Drag & drop

  • Kinds of feedback

– Visual – Audio – Haptic

32

slide-33
SLIDE 33

Modeling Human Error

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

33

slide-34
SLIDE 34

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

slide-35
SLIDE 35

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

slide-36
SLIDE 36

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

slide-37
SLIDE 37

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

slide-38
SLIDE 38

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

slide-39
SLIDE 39

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

slide-40
SLIDE 40

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

slide-41
SLIDE 41

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

slide-42
SLIDE 42

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

slide-43
SLIDE 43

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