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

http://www.bu-ngasariresort.com/

Hall of Fame or Shame?


Human Factors Model


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


Machines are better in

• alertness • speed and power • sensor detection

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

storage • simultaneous

activities


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


stages of execution

stages of evaluation

Stages of Execution


Stages of Evaluation


Activity Cycle


Activity Cycle


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


Human error – in planning and execution

slips errors of execution fixing – better interface design

mistakes

errors of intention

better understanding of system


Interaction styles

• Command line

• Menu selection

• Form-fill

• Direct manipulation (WIMP, GUI)


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


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


Command Line

• What does this command do?

grep –v ^$ filea > fileb


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)


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


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


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


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


Simultaneous Menus

• all options are available simultaneously

• but, might not be fitted in one screen


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



Tree Structure


Acyclic Network


Cyclic Network


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


Asymmetric Menus


i

ii

w

nwDAvg.

i

ii

w

kwBAvg.

Asymmetric Menus


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


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


Item presentation sequence

Natural sequence

• Time

• Numerical ordering – Ascending or descending order

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

weight, etc.


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


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


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


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


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



• 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



• 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



• Error message for unacceptable values – indicate permissible values

• Optional fields clearly marked

• Explanatory messages for fields

– status bar

• Completion signal


Coded fields

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

• Personal ID:

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

---- or


Coded fields

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

• Dates:

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

• Currency

$ _ _ _ _.00

฿ _ _ _ _.00


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


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


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


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.


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

Documents