web design it 130 robin burke. outline bad design usability design process high-level usability...
TRANSCRIPT
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