Tomorrow is October. Project Plan Plan for the whole semester Expect more detail closer in Expect...

Tomorrow is

October

SHOULD HAVE BEEN DONE

Project Plan

Plan for the whole semester Expect more detail closer in Expect more accuracy closer in Expect individual detail Questions it will help answer

Demos, slack time, early warnings

COMING SOON…

Test Plan

How are you planning to test? What tools are you going to use? How are you going to generate test

cases?

… starting the conversation …

User Manuals

Next level of detail from functional spec What you plan to build Can be in any form: FAQ, read.me, tool

tips, doc. Focus on end users, not admins

Demos Next Week

7 per day Random draw If you have a team member missing one

day, let me know

Demos

What you are building How you are building it Demo

Tech Talks

Next week walkthrough with meLanguage gameRoad AmicoBricksRed Ribbon (Oct 12 okay)

Walkthroughs

Presentation and demo plannedWho is going to speakContent of visuals

Give me the presentation

Presentation Reminders

You can use two projectors Have something interesting for people to

look at Do not wing it Look at Presentation Tips on the class

site Google Death by Powerpoint

One of my favorites

(USER) INTERFACES

Types of Interfaces

Computer-ComputerProgram APIsNetwork flowsFiles

Human-ComputerCommand lineGraphical

Interesting Issues We Aren’t Covering

Visualization and Information Design How to present results

Visualization usually refers to dynamically created results○ Data○ Information

Information design usually refers to crafted piece○ Edward Tufte

Minard: Napoleon’s March to Moscow

- Width of band shows size of army at each position. - Black band shows retreat tied to temperature and time

Computer-Computer

Program APIs

When do you need them?Should you build them into all systems?Consequences of not having them

Needed characteristicsBackward compatibility: how do you extend?Checking: caller or callee?

Appropriate scopeOne with parameters or many?

Network Flows

Same considerations as APIs, but more so Different machines will upgrade at different

times No control over the other side Always identify level and negotiate support

Base and towers Use well-supported protocols

FTTP, sockets, web-sockets, JSON, …

Files

See prior two pages: all the same Added problems

Files corruptedFiles deletedFiles edited

Use extensible formats preferably with readily available parsers

Human-Computer

User Interfaces

“Human error” caused by bad design Disasters

1987 Therac-25: too many messages => ignored the important ones

1995 airline crash: chose the wrong landing plan

2009 airline crash: pilot and co-pilot controls not connected

Text Other

Command line Question and answer Form based Menu Natural language Speech

GUI Gesture Virtual reality Augmented reality Ubiquitous (unaware) Perceptual

Interaction Styles

GUI or not to GUI?

How often is the task done? How many objects are handled at a

time?

Physical limitations Environment

What Makes a Good Design? Consider designs you like

(we know web designs, but the principles apply to any interface)

… and those you don’t The Ugly

Top 20 listBiggest Mistakes

More than the Look

The UI Iceberg

Visuals

InteractionTechniques

Object Model

Feel30%

Look10%

The things you use60%

Toolkits and style guides help with look and feel, the tip of the usability iceberg.

Real usability gains come from system and application objects perceived by users.

Consider well-known sites What is the object model?

EbayAmazonFacebook

User Interface Models

Object-actionChoose the object and then the action to

performWindows GUI:

select the file, right click for actions

Action-objectChoose the action and then the objectWindows command line:

“copy” file_a file_b

Fundamental Concepts

What the user needs to do

The order that he does it

Is it natural? How much does

he have to remember?

HCI: Human Computer Interaction

32

An Interaction Framework

Output

Input

the system’s capability to output information

Presentationthe user’s ability to understand the output

Observation

the system’s ability to accept the input

Performance

the user’s ability to do the input

Articulation

images from www.dilbert.com and www.palm.com

33

Human traitsIncredibly slowError-proneIrrationalEmotionalInferentialRandomUnpredictableEthicalIntelligent

Computers and Humans

Computer traitsIncredibly fast

Error-freeDeterministic

ApatheticLiteral

SequentialPredictable

AmoralStupid

ideas from from The Inmates are Running the Asylum, A. Cooper, images from www.dilbert.com

Humans

35

Memory Human memory is limited Miller's magical number 7 (+-2)

36

Motor Skills

Easiest screen locations to point to? Fitt’s Law – The time to acquire a target is a

function of the distance to and size of the target.

Why do pop-ups work?

37

Reasoning

Humans are not consistently logical. Wason's cards

4 E 7 K

Given cards with: a letter on one side

a number on the otherDoes a vowel on one side an even # on the other side?What cards do you have to turn over to check this?

38

Things we regret eating

spam

bacon, eggs and spam

spam, spam, bacon, eggs and spam

just eggs without the spam

spam

bacon, eggs and

spam

spam, spam, bacon, eggs and spam

just eggs without the spam

Things we regret eating

Perception

Using Color:Some people are colorblind.Design in black and white.

Using Fonts:Make capital letters 2.3-5.2

mm high, lines ≤ 60 chars wide, & use ragged right.

Use dark letters (not blue) on a light background.

BLOCK CAPS only for non-words

illustrations from Spoelsky, 2001 and www.innergeek.com

39

Humanity is diverse. People have different:

languagescultural expectationscolor perceptionergonomic needsabilities/disabilitiesages

Diversity

Making an Interface Accessible

Disability Challenges Visual

Text color and size, contrast, eye-hand coordination Movement

Simultaneous key strokes, mistaken strokes Hearing

Audio cues Cognitive and Language

Complex or inconsistent displays, word selection Seizures

Light and sound patterns

General Requirements

Undo Restore defaults Minimize memory load Easy access to frequent functions Avoid unnecessary steps

NOT JUST ACCESSIBILITY ISSUES!

Keyboards

Keyboard shortcuts vs mouse Changeable shortcut combinations Tabbing order and items Multi-key strokes

Mouse

Cancellable Visual feedback Target size

Graphics and Text

Customizable Easily identifiable Space between

Displays

Do not interfere with screen readers or accessibility tools

Make labels consistent and obviousPositionStyleStand-alone and consistent

Screen-reader friendlyOrder

Do not depend on color

Other

Audio adjustable Animation optional Avoid flashing and blinking Make focus clear Clear indication of erroneous keystroke Adjustable timing

Just good interface practices

One Methodology

50

Jakob NielsenDiscount Usability (1993)

Basic elements:User/Task Observation

Scenarios

Heuristic Evaluation

Simplified Thinking-Aloud

Le mieux est l'ennemi du bien Voltaire, 1764

images from www.useit.com

51

User Task Observation

Nielsen doesn’t explicitly list this step; he assumes it.

Customer Anthropology – the study of your customers' people and behaviours in their 'natural habitat'.

“Customer Anthropology is a lot like birdwatching in that you want to try to make yourself invisible to those you're watching

- Dave Pollard, salon.com

image from www.salon.com

52

Scenarios

Nielsen sees this as a form of prototyping.

He suggests using either mockups or prototypes, provided that they are small.

53

Heuristic Evaluation

Usability experts can review a design with respect to:Interface style guidesGeneral usability guidelines

Base the review on either:Mock-upsPrototypes

Approaches:Cognitive Walkthough

54

Thinking-Aloud Protocols

Watch real users do real tasks using the system.

Have them talk about what they are doing and why.

“A user interface is well designed when the program behaves exactly how the user thought it would.”

- Joel Spolsky, UIDP

image from joel.spolsky.com

Design Principles

56

Interface Design Principles Help the user learn the interface. Put the user in control of the

interface. Make the interface robust.

57

Learnability

The interface is useless if it is unusable. Principles:

Be consistent.Plagiarize.Establish meaningful defaults.Make functions visible or memorable.Make the mapping from control to goal clear.Encapsulate action sequences.

58

Control

Users, particularly experienced users, want to be in control.

Principles:Allow the user to be efficient.Enable shortcuts and customizations.Cluster common features together.Give appropriate feedback.Reduce short-term memory load.

59

Robustness

The system must deal with error. Principles:

Offer error prevention and handling.Support undo and redo.Provide good help and error messages.

Good Screen Design

Consistency: use of pull-downs vs. entry

Starting in the upper left corner: first thing to fill in

Simple navigationGrouping and alignmentKeep related issues together

Hierarchy for importance Pleasing visuals Captions for clarity

Type checking saving mmf CD

Branch Main St. Elm St. High St.

Privileges newsletter discounts quick loans

First name

Middle name

Last name

Street

City

State/county

OK Apply Cancel Help

Adapted from Software Engineering: An Object-Oriented Perspective by Eric J. Braude (Wiley 2001), with permission.

The content is all there…

checking

OK Apply Cancel Help

Account type Privileges

savingmoney marketCD

newsletter

discountsquick loans

Branch

Main St.Elm St.High St.

New Customers

Name

FirstMiddle

Last

Address

StreetCity

State/county

Adapted from Software Engineering: An Object-Oriented Perspective by Eric J. Braude (Wiley 2001), with permission.

But it can be better

Use of White Space

More advice than you could ever wantActive and passiveClassy vs. mass-producedClutter or incomplete …

Mobile Apps

Examples that areEasy to useHard to use

ErrorsNot knowing your audienceMaking it difficult to touch/manipulateTrying to do too much

64

Patterns

Three Types of Windows

Properties of automobile 189

Property Value

Brand Toyota

Model Camry

ID 893-8913-789014Help

Word ___________________

This screen All screens

ABC alert message

Caution: “age” must be < 120

OKProperty – information only

Dialogue – input from user and subsequent action

Alert – information that needs to be seen before continuing. Developer determined.

Why Classify?

Use the right type of window Consider purpose when designing

Example: alert window must be seen; property window not as critical

Rollovers Information that is optional and selected by

the user

But it often can’t be copied. It doesn’t remain visible. Are those important for this usage?

This is a rollover window, designed to provide on-the-fly amplification

69

Multi-Level Undo

ProblemThe user makes a

mistake in a more involved task and needs to back the changes out.

SolutionProvide a multi-level

undo capability.

Pattern from Tidwell, 2005

70

Progress

ProblemThe user is performing a

process and would like to know how far they are.

SolutionBuild a progress bar that

indicates the percentage completion of the task at 2 second intervals.

Pattern from van Welie, 2000

71

Wizard

ProblemThe user must perform an

unfamiliar and involved task.

SolutionBuild a graphical, step-by-

step widget that takes the user through the task, indicating progress along the way.

Pattern from van Welie, 2000

72

Preferences

ProblemThe user would like to

control the general feel of an interface.

SolutionProvide a parameterized

way to tailor the interface in pre-specified ways.

Pattern from van Welie, 2000

73

Fisheye

ProblemThe user is working on

parts of a large artifact and has trouble “seeing” it all.

SolutionProvide a graphical view

of the artifact that shows all parts, but magnifies specific ones.

Pattern from salaakso, 2003

Final Words

GUI Screen Design Process

Know Your User or Client Understand the Business Function Understand the Principles of Good Screen Design Select the Proper Kinds of Windows Develop System Menus Select the Proper Device-Based Controls Select the Proper Screen-Based Controls Organize and Lay Out Windows Choose the Proper Colors Create Meaningful Icons Provide Effective Messages, Feedback, Guidance, and

Language Translation Test, Test, and Retest

Wilbert Galitz

76

Joel Spolsky (2001)Joel on Software

Usability, fundamentally, is a matter of bringing a bit of human rights into the world of computer-human interaction.

images from www.joelonsoftware.com

What’s theBig Idea