440 likes | 637 Vues
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?
E N D
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?
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 • 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 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
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