Web Design IT 130 Robin Burke

Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page 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 focus History Wired Busy-ness Arngren Electronics

Benefits of good design Confused customers leave lost sales Confused employees waste time training costs errors Spend 10% budget on usability 2x 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 purposes convince sell amuse aesthetic response Key site must effectively support goal

Audience A site will often have more than one audience Example: CTI site Audience effects age formality language

Content / Functionality Web site must deliver either or both Content information / media that the audience wants Functionality web applications that the audience wants to use Everything else is secondary

Testing Find typical users don't need many Have them use the design typical tasks Watch what they do just watch usually means record on video

Problem If we wait until the site is finished to test we may discover that many things are wrong expensive to re-implement If we don't have the site what do users test?

Prototyping Possible to test design without testing the finished implementation prototyping Low-fidelity prototyping works surprisingly well all on paper

Low-fidelity Prototype Hand-drawn pages Can test page organization labels / links navigation scheme

Exercise Low-fi prototype search 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 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 content text form widgets images media Presenting navigational tools links other controls

Information hierarchy Some items on page are more visible more visible = more important Controlling visibility contrast whitespace position background

Contrast Contrast establishes visibility font size color background motion Only works if used sparingly and consistently

also, whitespace

Position Top left most important Bottom less important Off-screen (requiring scrolling) least important many 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-example animation hell example Sun 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 Principle understanding a design takes effort designer should amortize this effort Consequences build templates that can accommodate the whole range of content design repetition is not boring content changes

Examples anti-example: Monona example: amazon.com

Simplicity Principle web pages are small stick to the essentials don't try to pack everything in Consequence use 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