web design it 130 robin burke. outline bad design usability design process high-level usability...

Web Design

IT 130

Robin Burke

Outline

Bad design Usability Design Process

High-levelUsability TestingDesign LayersPage Design

Good Design through Bad

Example

Task #1

Arthur Murray Dance Studios What does Arthur Murray teach in its

advanced classes? Find a dance studio in Illinois

Task #2

National Association for Child Development

Find the address of the Chicago chapter of the NACD

Task #3

Monona, WI Pay your real estate taxes online. What's the weather in Monona?

What makes a design bad?

Usability

Learnability first time user

Efficiency speed of task performance

Memorability next visit

Errors accuracy of interaction

Satisfaction pleasant to use

Problems

"Mystery meat" navigation force user to memorize link locations

"Shifting sands" navigation prevent users from learning navigation map

Failure of organization difficult to learn, impossible to remember

Efficiency "cool" graphics interfere with access to

content

More problems

Technology not user focusHistory Wired

Busy-nessArngren Electronics

Benefits of good design

Confused customers leavelost sales

Confused employees waste timetraining costserrors

Spend 10% budget on usability2x quality measures

How to have a good design

Basic principles of user interface Good design process

Basic UI Principles

Cognitive load "don't make me think"

Information hierarchy organize content by importance

Audience "not your problems, my problems"

Effectiveness optimize user experience

Content what do users want from you?

Design Process

Understand what the site is for goal / purposes

Understand who you're reaching audience

Understand what the audience wants content functionality

Structure and present content in pages Test your site

usability

Goal

Many possible purposesconvincesellamuseaesthetic response

Keysite must effectively support goal

Audience

A site will often have more than one audienceExample: CTI site

Audience effectsageformalitylanguage

Content / Functionality

Web site must deliver either or both Content

information / media that the audience wants

Functionalityweb applications that the audience

wants to use Everything else is secondary

Testing

Find typical usersdon't need many

Have them use the designtypical tasks

Watch what they dojust watchusually means record on video

Problem

If we wait until the site is finished to testwe may discover that many things are

wrongexpensive to re-implement

If we don't have the sitewhat do users test?

Prototyping

Possible to test designwithout testing the finished

implementationprototyping

Low-fidelity prototypingworks surprisingly wellall on paper

Low-fidelity Prototype

Hand-drawn pages Can test

page organizationlabels / linksnavigation scheme

Exercise

Low-fi prototypesearch for CTI internship possibilities

• what does the form look like?• what does the response look like?

Layers of design

Site Design overall picture what is the site to accomplish

Content what will go into the site how to maintain / update

Page what will be the look and feel of each page

Site Design

what/who is the site for? what are the logical units of organization? what kinds of navigation are required? what parts of the site are dynamic/static? what parts of the site change most

frequently?

Content Design

Segment the site. For each part,

what is the audience? what classes of documents exist? what content elements belong on each class

of document? what design guidelines are relevant to the

site? how will the navigation scheme be

presented?

Page Design

generate a template for each class of document how should the elements be arranged? what contents need emphasis?

for each page, fill in the appropriate template

Example

www.mlb.com audience content / functionality page design

Navigational metaphor

Principle web pages have no "natural" organizing

principle• designer must supply this

important content = 3 clicks from home page Consequences

Navigation is an essential part of content organization

Must be considered at each layer of design• site = needs / metaphor• content = content relationships• page = placement and organization of elements

Page design

Presenting contenttextform widgetsimagesmedia

Presenting navigational toolslinksother controls

Information hierarchy

Some items on page are more visiblemore visible = more important

Controlling visibilitycontrastwhitespaceposition

background

Contrast

Contrast establishes visibility font

size color background motion

Only works if used sparingly and consistently

also, whitespace

Position

Top leftmost important

Bottomless important

Off-screen (requiring scrolling)least importantmany users will never see

Use Information Hierarchy

Principle Most visible items should be most important Least important items should be least visible

Consequences Page should be structured to keep important

items visible Navigation elements are almost always

important

Examples

anti-exampleanimation hell

exampleSun Micosystems

Free-standing

Principle Page may be seen out of context via a third-party link Page will usually need enough context to stand alone

Consequences casual visitors should see basic information

• who / what / when / where repeating content

• headers• footers• navigation elements

Examples

anti-example: internal page from NACD

example: internal page from Microsoft

Consistency

Principleunderstanding a design takes effortdesigner should amortize this effort

Consequencesbuild templates that can

accommodate the whole range of content

design repetition is not boring• content changes

Examples

anti-example: Monona example: amazon.com

Simplicity

Principleweb pages are smallstick to the essentialsdon't try to pack everything in

Consequenceuse meaningful links to avoid scrolling

Examples

anti-example: Arngren example: Jakob Nielsen example? LA Times

Homework #6

Simple user-centered design exercise Design and draw 4 pages

political site Get 4 subjects to use Report results Pair project

Important points

Prototypes must be hand-drawn Report & prototypes must be

submitted in class