CMPUT 301: Lecture 14The Interaction

Lecturer: Martin JagersandDepartment of Computing Science

University of Alberta

Notes based on previous courses byKen Wong, Eleni Stroulia

Zach Dodds, Martin Jagersand

2

Today:

• Models of interaction

• Interaction styles

• Elements of WIMPS

3

Models of Interaction

• Terms:– goal

– to be accomplished

– domain– area of discourse

– tasks– operations to

manipulate domain concepts

– intention– specific action required

to meet goal

– core language– computational attributes

of the domain relevant to the system

– task language– psychological attributes

of the domain relevant to the user

4

Norman’s Model of Interaction

• Execution-evaluation cycle:1. establishing the goal

2. forming the intention

3. specifying the action sequence

4. executing the action

5. perceiving the system state

6. interpreting the system state

7. evaluating the system state with respect to goals and intentions

5

Norman’s Model of Interaction

• Why interfaces cause problems:– gulfs of execution difference between

1. the user’s formulation of the actions needed to reach the goal and

2. actions allowed by the system

– gulfs of evaluation distance between

1. the presentation of the system state and 2. the expectation of the user

6

Interaction Framework

• Framework:– four components

– language for each component

– input and output components form the interface

– four translations

– execution, state change, then evaluation

System UserInterface

7

Interaction Framework

• Does the (users) task language map easily to the input language?– e.g.,

– turning on only a certain section of room lights

– running a program whose icon is not visible

8

Interaction Framework

• Does the input language reach all system states?– e.g.,

– remote control unit with no way to access certain functions

9

Interaction Framework

• How to express system state with limited output devices?– e.g.,

– limited screen space to present the entire system state

10

Interaction Framework

• How effectively can the user interpret and evaluate the output?– e.g.,

– unmarked analog clock

– misleading or no feedback

– previewing facilities

– advice

11

Frameworks and HCI

12

Ergonomics

• Ergonomics:– Human factors engineering– the study of the physical characteristics of the

interaction– e.g.,

– physical controls

– physical environment

– qualities of the display

13

Ergonomics

• Arrangement of controls and displays:– efficiently accessible– avoid frustration– well organized

14

Ergonomics

• Organizing controls and displays:– functional

– group by function

– sequential– arrange to reflect order of use in a task

– frequency– most commonly used controls are most accessible

15

Ergonomics

• Health issues:– physical position– temperature– lighting– noise– time (exposure)

16

Interaction Styles

• Common interfaces:– command line

– menus

– natural language

– question/answer and query dialog

– forms and spreadsheets

– Direct/Indirect manipulation

– WIMP

– point and click

– 3D

17

Command Line

• Example:% cat foo | tr -sc A-Za-z ‘\012’ |tr A-Z a-z | sort | uniq -c | sort -n | tail -50

18

Command Line

• Advantages– flexible and powerful– useful for repetitive tasks– Easy to define macros

• Disdvantages– more difficult to use and learn– need to recall commands (no cues)– commands may vary across systems

19

Menus

• Example:Payment Details

Payment methods:1. Cash2. Cheque3. Credit card4. Invoice

9. Cancel transaction

Choose one: _

20

Menus

• Advantages– recognize options instead of recalling– Structures learning (logical grouping and

meaningful naming)

• Disadvantages– Dangers of too many menus– Can consume lots screen space

– Consider country selection

21

Natural Language

• What:– user expresses instructions in everyday

language

• Issues:– ambiguity

– “The man hit the boy with the stick”

– restricted domains or vocabulary– e.g.,

– Train ticket buying

22

Question/Answer

• What:– user replies to a series of questions with yes/no

or multiple choice answers

• Issues:– easy to learn and use– limited in flexibility and power– e.g.,

– wizards and assistants

– Turbotax

23

Query Dialog

• What:– user constructs expressions to retrieve information

from a database

• Issues:– query language syntax– requires experience– does result match what was intended?– e.g.,

– search engines

24

Forms

• User is presented with a display resembling a paper form and enters data into fields

Advantages:– Simplifies data entry– Requires modest training

Issues:– movement around the form– input validation and correction

25

Spreadsheets

• like forms, with a grid of cells containing values and formulas

Issues:– another programming paradigm– dependencies among cells– Designed for: what-if analyses– In practice used for: lists

26

Interaction styles

• Indirect interface

1. User has to visualize in his/her mind

2. No direct feedback on state change

3. Dissociation between users command and system response

• Direct manipulation

1. Visually presents task concepts

2. Immediate reaction

3. Easy learning

4. Encourages exploration

5. Affords high subject satisfaction

27

WIMP

• What is a WIMP interface?

28

WIMP

• What:– windows, icons, menus, pointer– user in control

• Examples:– Microsoft Windows– Mac OS– X Windows + window manager– NeXTStep

29

30

Point and Click

• What:– virtually all actions take only a single mouse

click

• Examples:– web browser– multimedia (CD ROM) programs– touchscreen information kiosks

31

3D

• What:– using 3D techniques, appearances, or

workspaces

• Examples:– virtual reality– virtual worlds– shading effects on icons, buttons, etc.

32

33

3D

34

6D, n-D

• Interact with computer controlled, intelligent (??) machines:

35

WIMP Interface Elements

• Windows– overlapping, tiled

– scrollbars

– titlebars

– move, resize, raise, lower, maximize, minimize, close, etc.

36

WIMP Interface Elements

• Icons

37

WIMP Interface Elements

• Menus:– pulldown, popup, falldown, tearoff, pinup, pie– grouping, hierarchy– keyboard accelerators– consistency– too tall?

38

WIMP Interface Elements

• Pointer:– click to focus, focus follows pointer– cursor shape indicates mode– tooltips, balloon help

39

WIMP Interface Elements

• Other:– buttons

– radio buttons

– check boxes

– sliders

– toolbars

– tabs

– progress indicators

– palettes

– dialog boxes

40

Screen Design and Layout

• Presenting information:– match presentation to purpose– e.g.,

– sort file listing by name, or by date, or …

– alignment of text versus numbers

41

Screen Design and Layout

• Entering information:– use clear, logical layout of form fields– requires task analysis– alignment is important

42

Screen Design and Layout

• Aesthetics and utility:– beauty versus utility– a pretty interface is not necessarily a good

interface– still, good graphic design can increase user

satisfaction

43

Screen Design and Layout

• Knowing what to do:– style guides

– platform or company standards for the design of user interfaces

– e.g., Macintosh Human Interface Guidelines

44

Screen Design and Layout

• Knowing what to do:– affordances

– “where do I click?”

– elements should suggest, by their shape and other attributes, what you can do with them

– e.g., a button affords pushing

45

Screen Design and Layout

• Localization/internationalization:– change of language for text– alignment and layout– date formats– time formats– number formats

46

Screen Design and Layout

• Date/time formats:

47

Interactivity

• Beyond the “look” of a user interface, there is also the “feel”.

48

End

• What did I learn today?

• What questions do I still have?