HCI - mod 2 (Guidelines, Principles and Theories)

Guidelines

summary

developed in the "early days"

Best Practices

Windows

Apple UI

From experience

good starting point for UI

Shared language

Widget Names

Functionality names

common lingo to discuss UI

3 components

  1. Specific and Practical Rules
  1. Guideline Examples
  1. Guideline Document

Provides

cures for design problems

cautions for potential danger

reminders based on experience

give details on how a design must be performed

appearance: style, colour usage, window appearance etc

Interaction usage

when to use check-boxes, when to use buttons etc

based on experience

developers found users preferred list+slider over pull-down menu

require all developers to follow the guidelines

requirement for any serious large-scale UI design

provides "shared language"

allows consistency within large team

sounds trivial but necessary

5 example cases

  1. Navigating the interface
  1. Guidelines for disabled
  1. Organizing the display
  1. Get user's attention
  1. Facilitate data entry

National Cancer Institute (NCI)

Developers developed 388 guidelines for designing their web-pages and other online info

Standardize task sequences

Ensure that embedded links are descriptive

Use unique and descriptive headings

Use radio button for mutually exclusive choice

Use check boxes for multi-answer choices

Develop pages that will print properly

Use thumbnail images to preview larger images

Enable screen readers or other tech for disabled people to access the webpage contents

Text alternatives for non-text elements [image, audio, sound, video etc]

alternatives for time-based multimedia [video and audio]

Colour not used as the only visual means of

conveying info

indicating an action

prompting a response

distinguishing a visual element

Title each frame, facilitating frame identification and navigation

Consistency of data display

terminology

abbrev

formats

colours

grammar

capitalization

Efficient info assimilation by the user

Format for presentation should be familiar to the user

Related to tasks at hand

justification

spacing

formatting

labels

units/measurements

numbers of decimal points

Minimal memory load on the user

Minimal carried info over from one screen to another

Require fewer actions

Tab key to move to next entry field vs having to use the mouse

Labels and common formats should be provided for novice

Compatibility of data display with data entry

Entering data should look similar to the eventual viewing o data

Displayed fields should be editable (as input)

Flexibility for user control of data display

For task convenience , user should be able to control how information is displayed (e.g. sorting, ordering of columns and rows)

diff tasks may require viewing the same data in diff ways

Urgent, exceptional and time dependent conditions need to be brought forward

e.g. damage and health in games

Intensity

limited use of high intensity

brightness/contrast

Marking

underlines

enclosing it in a box

asterisk*

bullet

Size

up to 4

with larger sizes attracting more attention

Fonts

3

Audio

Soft tones

positive

harsh tones

emergency

Summary

can occupy a substantial portion of user's time

usually the source of frustrating and potentially dangerous errors

  1. Consistency of data-entry transactions

similar sequence of actions

  1. Minimal input actions by user

Fewer actions

Too much hand movement is not good

means greater productivity and less error

single key-stroke, mouse or finger press compared to typing

Command line vs GUI

Avoid redundant data entry

waste time

increased effort

  1. Minimal memory load

Don't rely on codes

User don't want remember

Provide "selection" from a list or embedded menu

Don't need memorize choices

  1. Compatibility of data entry with data display

should match display capability

  1. Flexibility for user control (Experienced vs Novice)

Experienced may want "hot-keys" or "short-cuts"

novice doesn't

should be used cautiously

it goes against consistency

Principles

Determine user's skill levels

Identify tasks of application

5 primary interaction styles

8 golden rules of interface design

Start with population profile

age

gender

cultural background

Design goals based on skill level

Novice

Knowledgeable intermittent users

Expert frequent users

Inexperience with interfacce

Anxiety

Solutions

Restrict vocab

Provide help

Small number of actions

Feedback

Documentaions

Understand task concepts and interface basics

May have difficulty retaining

structure of menus

location of features

Solutions

Consistent sequences of actions

meaningful feedback

guides to frequent patterns of usage

protection from danger

encourage exploration

undo

Context dependent help

Thoroughly familiar with task and interface

Aims to be efficient

high speed

low error

Solutions

Rapid response time

Brief feedback

shortcuts

Macros

Multi-layer strategy (spiral)

Design for more than one of these classes

Present users with multiple features

Users can move up when they feel comfortable

Provide documentation to educate users

  1. After drawing user profile

must identify tasks to be carried out

before design can proceed

Usually involve long hours observing and interviewing users

  1. Decomposition of high level tasks into atomic actions
  1. Need to study relative task frequencies

Brainstorm

Examine current market

  1. Direct Manipulation
  1. Menu Selection
  1. Form-fill in
  1. Command Language
  1. Natural Language

Summary

Manipulate visual representations

Desktop icons

Appeals to novices

easy to remember for intermittent users

Evaluation

PROS

CONS

fast

feedback

easy to understand and retain

exploration encouraged

good for novices

hard to program

interaction devices are harder to design or modify

Summary

User reads a list of items, and selects one

Appropriate for novice and intermittent users

can be appealing to frequent users if display and selection mechanisms are rapid

Evaluation

PROS

CONS

no memorization

few actions

clear structure

tools for validity

consistency exist

Make actions understandable not easy, careful task analysis

Summary

Data entry info fields

Appropriate for intermittent users or frequent users

Evaluation

PROS

CONS

rapid

for more advanced users

tools available for forms

must understand labels and request format

be able to respond to errors

training required

Summary

Suitable for expert frequent users who derive great satisfaction from mastering a complex set of semantics and syntax

Evaluation

PROS

CONS

feeling of control

rapid

advanced users like it

histories and macros are easy

flexibility

high error rates

training required

poor retention rate

hard to create error messages

Summary

Computers will respond properly to arbitrary natural language sentences or phrases

Evaluation

PROS

CONS

easy to learn

unpredictable

requires clarification dialog

tech not fully developed

  1. Strive for consistency
  1. Cater to universal usability
  1. Offer informative feedback
  1. Design dialogs to yield closure
  1. Permit easy reversal of actions
  1. Support internal locus of control
  1. Reduce short term memory load
  1. Prevent errors

Consistent sequence of actions for similar situations

Identical terminology

Consistent visual layout

prompts

menus

help

fonts

colour

Recognise the needs of a diverse user group

Design for plasticity

means content that can be used on any type of display (portability)

Interface supports with features for Novice -> Expert

system should provide feedback

for every user action

Frequency of task affects feedback type

Common tasks

Errors/uncommon tasks

modest feedback

substantial feedback

Visual approaches make feedback easy

Sequences of actions should be organized into groups with a beginning, middle and end

Feedback provides sense of accomplishment

e.g. Downloading software has a step by step process

Actions should be reversible

Relieves anxiety (user knows that errors can be undone)

Encourages exploration of unfamiliar options

units of reversibility may be a

single action

data entry

complete group of actions

Design decision should include

history size

what does it mean to undo something

Let the user know they can reverse an action

Experienced users want to feel in control

feel in charge of interface

interface rapidly responds to the user

If not

builds anxiety and dissatisfaction

surprising interface actions

tedious actions

inability to produce desired results

Avoid acausality, make users rather than responders


Acausality (BAD)

some sound is played even though user not involved

little paper-clip appears when not expected

Causality (GOOD)

sound immediately after user clicks on a link

Limit errors a user can make

gray out menu items that don 't apply

no characters in a numeric field

In case of errors

detect error

simple, constructive and specific instructions

do not change system date

How to reduce error rate?

better error messages

helps fix current error

helps reduce similar errors

increase satisfaction

specific, positive and constructive

"Printer is off, please turn on" instead of "Illegal operation"

reduce chance for error

organising info, screens, menus

commands and menu choices should be distinctive

state of interface should be known (change cursor then busy)

consistency of actions (Yes/No order of buttons)

Theories

Stages of action model

  1. Forming the goal
  1. Forming the intention
  1. Specifying the action
  1. Executing the action
  1. Perceiving the system state
  1. Interpreting the system state
  1. Evaluating the outcome

Gulf of execution

Gulf of evaluation

Mismatch between the user's intentions and the allowable actions

Mismatch between the system's representation and the users' expectations

happens from 5 to 7

happens from 2 to 4