301 Lect 14

8/6/2019 301 Lect 14

1/12

1

CMPUT 301: Lecture 14

The Interaction

Lecturer: Martin JagersandDepartment of Computing Science

University of Alberta

Notes based on previous courses by

Ken 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

Normans 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

8/6/2019 301 Lect 14

2/12

2

5

Normans Model of Interaction

Why interfaces cause problems: gulfs of execution

difference between

1. the users 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


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


Does the input language reach all system states?

e.g.,

remote control unit with no way to access certain

functions

8/6/2019 301 Lect 14

3/12

3

9


How to express system state with limited outputdevices?

e.g.,

limited screen space to present the entire system state

10


How effectively can the user interpret andevaluate 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

8/6/2019 301 Lect 14

4/12

4

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

8/6/2019 301 Lect 14

5/12

5

17

Command Line

Example:% c a t f oo | t r - s c A -Z a- z \ 0 1 2 |

t r A - Z a - z | s o r t | u n i q - c | s o r t - n | t a i l - 5 0

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:P a y m e n t D e t a i l s

P a y m e n t m e t h o d s :

1 . Ca s h

2 . C h e q u e3 . C r e d i t c a r d

4 . I n v o i c e

9 . C a n c e l t r a n s a c t i o n

Ch o o s e o n e : _

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

8/6/2019 301 Lect 14

6/12

6

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

8/6/2019 301 Lect 14

7/12

7

25

Spreadsheets

like forms, with a grid of cells containing valuesand formulas

Issues:

another programming paradigm

dependencies among cells

Designed for: what-if analyses

In practice used for: lists

26

Interaction styles

Indirect interface1. User has to visualize in

his/her mind

2. No direct feedback on

state change

3. Dissociation between

users command and

system response

Direct manipulation1. 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

8/6/2019 301 Lect 14

8/12

8

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

8/6/2019 301 Lect 14

9/12

9

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


Icons

8/6/2019 301 Lect 14

10/12

10

37


Menus: pulldown, popup, falldown, tearoff, pinup, pie

grouping, hierarchy

keyboard accelerators

consistency

too tall?

38


Pointer: click to focus, focus follows pointer

cursor shape indicates mode

tooltips, balloon help

39


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

8/6/2019 301 Lect 14

11/12

11

41


Entering information: use clear, logical layout of form fields

requires task analysis

alignment is important

42


Aesthetics and utility: beauty versus utility

a pretty interface is not necessarily a good interface

still, good graphic design can increase user

satisfaction

43


Knowing what to do:

style guides

platform or company standards for the design of user interfaces

e.g., Macintosh Human Interface Guidelines

44


Knowing what to do:

affordances

where do I click?

elements should suggest, by their shape and otherattributes, what you can do with them

e.g., a button affords pushing

8/6/2019 301 Lect 14

12/12

12

45


Localization/internationalization: change of language for text

alignment and layout

date formats

time formats

number formats

46


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?

301 Lect 14

Documents

Transcript of 301 Lect 14