user interface designchate/2143416/06... · user interface design lecture 6 interaction styles....

User Interface Design

Lecture 6

Interaction Styles

Hall of Fame or Shame?

C. Patanothai 06-Interaction Styles 2

Hall of Fame or Shame?

C. Patanothai 06-Interaction Styles 3

Human Factors Model

C. Patanothai 06-Interaction Styles 4

from http://www.hf.faa.gov/Webtraining/HFModel/HFInterModel/overview.htm

Humans are better in

• sensory functions • perceptual abilities

– stimulus generalization

– abstract concept

• flexibility – ability to improvise

• judgment • selective recall • inductive reasoning

C. Patanothai 06-Interaction Styles 5

Machines are better in

• alertness • speed and power • sensor detection

outside human range • routine work • computation • short-term memory

storage • simultaneous

activities

C. Patanothai 06-Interaction Styles 6

Donald Norman’s model

• Seven stages – forming the goal – forming the intention – specifying the actions at interface – executing the action

– perceiving the system state – interpreting the system state – evaluating the outcome respect to goal

• Norman’s model concentrates on user’s view of

the interface

C. Patanothai 06-Interaction Styles 7

stages of execution

stages of evaluation

Stages of Execution

C. Patanothai 06-Interaction Styles 8

Stages of Evaluation

C. Patanothai 06-Interaction Styles 9

Activity Cycle

C. Patanothai 06-Interaction Styles 10

Activity Cycle

C. Patanothai 06-Interaction Styles 11

problem

problem

Gulf of Evaluation

Gulf of Execution

Using Norman’s model

Some systems are harder to use than others

Gulf of Execution user’s formulation of actions

≠ actions allowed by the system

Gulf of Evaluation user’s expectation of changed system state

≠ actual presentation of this state

C. Patanothai 06-Interaction Styles 12

Human error – in planning and execution

slips errors of execution fixing – better interface design

mistakes

errors of intention

better understanding of system

C. Patanothai 06-Interaction Styles 13

Interaction styles

• Command line

• Menu selection

• Form-fill

• Direct manipulation (WIMP, GUI)

C. Patanothai 06-Interaction Styles 14

Command Line

Advantages

• powerful: offers access to system functionality

• flexible: has a number of options/parameters

• better for expert users than novices

• conserves screen space

Disadvantage

• commands must be memorized

• requires learning

• intolerant of typing errors

• difficult for normal user

C. Patanothai 06-Interaction Styles 15

Command Line

• Computer programming languages • Scripting languages • Database query languages • Operating systems commands

– users issue a command and watch the output. – if correct, next command – else some strategy is adopted

C. Patanothai 06-Interaction Styles 16

Command Line

• What does this command do?

grep –v ^$ filea > fileb

C. Patanothai 06-Interaction Styles 17

Simple command list

• Each command for a single task

• # of commands matches # of tasks

• small # of tasks simple to learn and use

• large # of cmds danger to confuse (e.g. vi editor of Unix)

C. Patanothai 06-Interaction Styles 18

Guidelines for command line

• choose meaningful commands • follow consistent syntax (grammatical

structure) • support consistent rules for

abbreviation • make command as short as possible to

help prevent typing errors • limit the number of commands • offer macro

C. Patanothai 06-Interaction Styles 19

Menu Selection

Advantages

• Utilizes recognition memory

• reduces interaction complexity

• aids decision-making process

• minimizes typing

• aids casual users

Disadvantage

• may slow expert users

• consumes screen space

• may create complex menu hierarchies

C. Patanothai 06-Interaction Styles 20

Menu Selection

• Set of options displayed on the screen • Options visible

– less recall - easier to use – rely on recognition so names should be meaningful

• Selection by: – numbers, letters, arrow keys, mouse – combination (e.g. mouse plus accelerators)

• Often options hierarchically grouped – sensible grouping is needed

C. Patanothai 06-Interaction Styles 21

Sequential Linear Menus

• only one path

• the user may need to go back and change an answer in a previous menu

• the user may want different order

C. Patanothai 06-Interaction Styles 22

Simultaneous Menus

• all options are available simultaneously

• but, might not be fitted in one screen

C. Patanothai 06-Interaction Styles 23

Hierarchical Menus

• tree structure • symmetric or asymmetric • depth

– the number of levels that one must traverse to reach the terminal node

• Breadth – the number of alternatives at each level

• May not match user flow

C. Patanothai 06-Interaction Styles 24

C. Patanothai 06-Interaction Styles 25

Tree Structure

C. Patanothai 06-Interaction Styles 26

Acyclic Network

C. Patanothai 06-Interaction Styles 27

Cyclic Network

C. Patanothai 06-Interaction Styles 28

Hie

rarc

hic

al M

enu

s

Asymmetric menus

• Average depth – equal weighting of all possible paths

– weighting by probability of path given equal choice probability

– weighting by probability of path given observed choice probabilities

C. Patanothai 06-Interaction Styles 29

Asymmetric Menus

C. Patanothai 06-Interaction Styles 30

i

ii

w

nwDAvg.

i

ii

w

kwBAvg.

Asymmetric Menus

C. Patanothai 06-Interaction Styles 31

Asymmetric Menus

Path Depth Equal Path Equal Choice Observed Choice

1 1 1/11 1/2 0.8

2 2 1/11 1/6 0.12

3 3 1/11 1/12 0.01

4 3 1/11 1/12 0.01

5 3 1/11 1/24 0.012

6 3 1/11 1/24 0.018

7 3 1/11 1/24 0.024

8 4 1/11 1/96 0.0015

9 4 1/11 1/96 0.0015

10 4 1/11 1/96 0.0015

11 4 1/11 1/96 0.0015

Average 3.09 1.87 1.29

Std.Dev 0.9 0.97 0.62

Table - Measures of Depth in Asymmetric Menus: Probability Weights

C. Patanothai 06-Interaction Styles 32

Depth versus Breadth

• Depth -- # of level • Breadth -- # of item/level • In general

– 4 – 8 items/level – 3 – 4 level

• With large menu, one or both must be compromised

• Breadth preferred over depth

C. Patanothai 06-Interaction Styles 33

Item presentation sequence

Natural sequence

• Time

• Numerical ordering – Ascending or descending order

• Physical Properties – Increasing or decreasing length, area, volume,

weight, etc.

C. Patanothai 06-Interaction Styles 34

Item presentation sequence

When no task-related ordering

• Alphabetic sequence of terms

• Grouping of related items

• Most frequently used item first

• Most important items first

C. Patanothai 06-Interaction Styles 35

Menu selection guidelines

• Use meaningful groupings of items • Use meaningful sequencing of items • Make items brief, begin with keyword • Use consistent grammar, layout,

terminology • Allow typeahead, jumpahead, or other

shortcuts • Put keyword to the left • Allow jumps to previous and main menus • Provide online context-sensitive help

C. Patanothai 06-Interaction Styles 36

Form Fill-in

Advantages

• familiar format

• simplifies information entry

• requires minimum training

Disadvantage

• consumes screen space

• requires careful and efficient design

• does not prevent typing error

C. Patanothai 06-Interaction Styles 37

Form Fill-in

• Primarily for data entry or data retrieval

• Screen like paper form.

• Data put in relevant place

• Requires – good design

– obvious correction facilities

C. Patanothai 06-Interaction Styles 38

Form Fill-in guidelines

• Meaningful title – avoid computer terminology

• Comprehensible instructions

– describe tasks in familiar terminology

• Logical grouping and sequencing of field

– adjacent related field – sequence reflect common patterns

C. Patanothai 06-Interaction Styles 39

Form Fill-in guidelines

• Visually appealing layout of the form – uniform distribution of fields – Alignment of field labels – match the paper form

• Familiar field labels

– common terms

• Consistent terminology and abbreviations

– prepare a list of terms and acceptable abbreviations

C. Patanothai 06-Interaction Styles 40

Form Fill-in guidelines

• Visible space and boundaries for data-entry fields – # of characters in the fields

• Convenient cursor movement

– TAB or arrow key

• Error correction for individual

characters and entire fields

C. Patanothai 06-Interaction Styles 41

Form Fill-in guidelines

• Error message for unacceptable values – indicate permissible values

• Optional fields clearly marked

• Explanatory messages for fields

– status bar

• Completion signal

C. Patanothai 06-Interaction Styles 42

Coded fields

• Telephone number: Telephone: _ - _ _ _ _ - _ _ _ _ or Telephone: ( _ _ ) _ _ _ - _ _ _ _

• Personal ID:

_ - _ _ _ _ - _ _ _ _ _ - _ _ - _ or _ _ _ _ _ _ _ _ _ _ _ _ _ or

---- or

C. Patanothai 06-Interaction Styles 43

Coded fields

• Times: _ _ : _ _ : _ _ ( HH:MM:SS) (AM/PM)

• Dates:

Date: _ _ / _ _ / _ _ (DD/MM/YY) Date: _ _ / _ _ / _ _ _ _ (DD/MM/YYYY)

• Currency

$ _ _ _ _.00

฿ _ _ _ _.00

C. Patanothai 06-Interaction Styles 44

Direct Manipulation

Advantages

• faster learning

• easier remembering

• exploits visual/spatial cues

• easy error recovery

• provides context

• immediate feedback

Disadvantage

• greater design complexity

• window manipulation requirements

• requires icon recognition

• inefficient for touch typists

• increased chance for screen clutter

C. Patanothai 06-Interaction Styles 45

WIMP Interface

Windows

Icons

Menus

Pointers

… or windows, icons, mice, and pull-down menus!

• default style for majority of interactive

computer systems, especially PCs and desktop machines

C. Patanothai 06-Interaction Styles 46

Toolbars

• long lines of icons … … but what do they do?

• fast access to common actions

• often customizable: – choose which toolbars to see

– choose what options are on it

C. Patanothai 06-Interaction Styles 47

Dialogue boxes

• information windows that pop up to inform of an important event or request information.

e.g: when saving a file, a dialogue box is

displayed to allow the user to specify the filename and location. Once the file is saved, the box disappears.

C. Patanothai 06-Interaction Styles 48