1 / 53

User-Centered Web Design

User-Centered Web Design. Collier Jones, Jochen Rode Web Application Research & Development Virginia Tech April 2, 2001 http://www.ward.vt.edu/pubs/ucd/. In two hours you’ll hear…. …an intro to usability …OUR web design strategy …a little preaching about page design

bud
Télécharger la présentation

User-Centered Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. User-CenteredWeb Design Collier Jones, Jochen Rode Web Application Research & Development Virginia Tech April 2, 2001 http://www.ward.vt.edu/pubs/ucd/

  2. In two hours you’ll hear… …an intro to usability …OUR web design strategy …a little preaching about page design …references to tools & books we like

  3. You are here: Home OUR Process • PlanI want ______. • AnalyzeFact finding. • DesignPutting the ideas on paper. • ImplementCode. Test. Repeat. • LaunchLet’s get it out. • MaintainKeep it fresh. Keep it working.

  4. You are here: Home > Usability > What is it? Usability: What is it? • UsefulnessRelevant information & services • Ease-of-useCould your grandmother use it? • LearnabilityHow did that work again? • LikeabilityIf I hate it, I don’t use it!

  5. You are here: Home > Usability > Why care? Usability: Why care? • (In Business world: to close a deal) • Web site = organization’s image • Establishes trust • Saves time and money • Fewer phone calls & e-mails • Encourages users to return • Avoids frustration

  6. You are here: Home > Usability Usability Usability is a key concept in all phases of a successful design process. It is not an afterthought.

  7. You are here: Home OUR Process • PlanI want ______. • AnalyzeFact finding. • DesignPutting the ideas on paper. • ImplementCode. Test. Repeat. • LaunchLet’s get it out. • MaintainKeep it fresh. Keep it working.

  8. You are here: You are here: Home > Plan Plan • Set goals • What’s the site’s purpose? • Who will use the site? • When do we need it done? • Think big. Start small. • Work in a group • Pick a project manager • Assign duties

  9. You are here: Home OUR Process • PlanI want ______. • AnalyzeFact finding. • DesignPutting the ideas on paper. • ImplementCode. Test. Repeat. • LaunchLet’s get it out. • MaintainKeep it fresh. Keep it working.

  10. You are here: You are here: Home > Analyze Analyze • AudienceWho are we doing this for? • ContentWhat do they need? • Old Web SiteWhat did (not) work before? • CompetitorsHow do others do it?

  11. You are here: Home > Analyze > Audience Audience • Roles – different needs • Background • Experience with the web • Knowledge of subject matter

  12. You are here: Home > Analyze > Audience Audience • Technology • Speed of connection & computer * • 14% VT modem pool users • 59% VT Ethernet users • 27% others (modem, DSL, cable) • Which web browser? * • IE 78% • Netscape 21% • others 1% • Screen size e.g. VT web stats * Stats from www.vt.edu, February 2001

  13. You are here: Home > Analyze > Content Content • Interviews • Speak to individual users about needs • Ask front desk what people call about • Observation • Learn what the users’ work flow really is • Watch students in lab or common area • Online Surveys • Wants vs. Needs!

  14. You are here: Home > Analyze > Old Web Site Old Web Site • User feedback – e-mails & phone calls • Web server logs • Most accessed content • Least accessed content • Search engine logs • Frequent search terms • Failed searches • Ask what didn’t work. • Ask what worked. e.g. VT search engine stats

  15. You are here: Home > Analyze > Competitors Competitors • Learn from others! • Other universities, departments • Content & features • Site structure • Graphical design

  16. You are here: Home > User Behavior User Behavior • We don’t read pages. We scan them. • We don’t make optimal choices. We satisfice*. • We don’t figure out how things work. We muddle through. *cross between “satisfying” & “sufficing”

  17. You are here: Home OUR Process • PlanI want ______. • AnalyzeFact finding. • DesignPutting the ideas on paper. • ImplementCode. Test. Repeat. • LaunchLet’s get it out. • MaintainKeep it fresh. Keep it working.

  18. You are here: Home > Design Design • Content • Information Architecture • Navigation • Page Design • Technology Factors • Work in a group! • Prototype. Prototype. Prototype.

  19. You are here: Home > Design > Content Content • Always give the user the next step! • On every page: • Contact info • Last modified date • On home page: • Show purpose of the site • Privacy statement (VA Law) • Write for the web e.g. iPing

  20. You are here: Home > Design > Content > Write for the Web Write for the Web • Use concise, short sentences • Facilitate scanning • Lists rather than blocks of text • Short paragraphs • Bold key phrases • Have abstract for long documents • Standardize spelling, language • Check spelling Kilian Crawford: “Writing for the Web”

  21. You are here: Home > Design > Information Architecture Information Architecture • Org charts are evil! • Take a user/problem oriented approach • Users don’t know nor care about how your organization works • Labeling • No buzzwords or cute labels • Use the user’s language • No abbr.

  22. You are here: Home > Design > Information Architecture Information Architecture • Consistency in grouping • How many items? • (Don’t) Forget Miller’s 7±2 • Balance depth and breadth • Techniques • Whiteboard • Put items on post-its • Use text editor, Word’s outline view • Print your site, cut out links and rearrange e.g. buy.com

  23. You are here: Home > Design > Navigation Navigation • Requirements • Users know where they are (the big picture) • Users know where they can go • Consistency • Labels • Location • Look & Feel • Put important stuff up front • Featured sites • Quick links • What’s new e.g. Frogs e.g. CNN front page

  24. You are here: Home > Design > Navigation Navigation • Good practices/Conventions: • Global navigation always visible • Make logo link to home page • Chopable, meaningful URL’se.g. www.ucs.vt.edu/software/win/ • For big sites (> 20? pages) • Search feature on every page • Site map • Make your site searchable • Make the site error-resistant • Custom “404 - document not found”-pages • Offer alternatives for zero results searches e.g. CNET site map e.g. Thinkquest 404 page

  25. You are here: Home > Design > Navigation Navigation • Links • Make them clearly identifiable • Only links should be underlined • Different color than body text • Don’t separate them with a comma • Use descriptive labels, not “click here” • Don’t overuse links in body text • Make them work!

  26. You are here: Home > Design > Page Design Page Design • Basic Principles • Layout • Images • Fonts & Colors • Don’ts • Good design = User’s trust e.g. ToolToad

  27. You are here: Home > Design > Page Design > Basic Principles Basic Principles • Robin Williams: The Non-Designer’s Design Book • Contrast • Repetition • Alignment • Proximity e.g. Sapient

  28. You are here: Home > Design > Page Design > Layout Layout • Consistency • Avoid clutter, less is more • Establish visual hierarchy • White space  wasted space • Avoid Frames, problems with: • Printing • Bookmarking • Photoshop, Dreamweaver for prototyping

  29. You are here: Home > Design > Page Design > Images Images • Consistency • Don’t use for text if you can help it • Optimize images by • Using optimal image formats • Line-art, up to 256 colors: gif • Photos: jpeg • Reducing file size & download time

  30. You are here: Home > Design > Page Design > Fonts & Colors Fonts & Colors • Consistency • Use style sheets for formatting • Use “web safe” fonts • Don’t use • Colors • Key to building identity • Use a few colors (2 or 3 + B & W) • Good contrast for readability • Use “web safe” colors for large patches • Orange and maroon e.g. US Airways e.g. VT UCS

  31. You are here: Home > Design > Page Design > Don’ts Don'ts • No pop-ups • No “designed for…” • No icons without titles • No excessive movement • No “coming soon/under construction” • No obnoxious backgrounds • No splash screens

  32. You are here: Home > Design > Technology Factors Technology Factors • Web sites must degrade gracefully • Provide alternative content • NOSCRIPT tags for JavaScript • Non-Flash, Text, Printable Version • Browsers • We design for IE, Netscape >4.x • Still usable in older browser, just not as pretty • Screen sizes • We design for 800x600 • Strive for “liquid” designs e.g. VT Engineering

  33. You are here: Home OUR Process • PlanI want ______. • AnalyzeFact finding. • DesignPutting the ideas on paper. • ImplementCode. Test. Repeat. • LaunchLet’s get it out. • MaintainKeep it fresh. Keep it working.

  34. You are here: Home > Implement Implement • Step 1: Code. • Step 2: Test. • Step 3: Repeat. • Step 4: Document.

  35. You are here: Home > Implement > Code Code • Do it by hand • Homesite 4.52 for HTML • TopStyle 2 for CSS • WYSIWYG • Dreamweaver 4 • FrontPage 2000

  36. You are here: Home > Implement > Test Test • User Testing • “Discount Usability” - few users, low tech, multiple sessions • Users perform realistic & important pre-defined tasks • Expert Review • Subject matter • Usability e.g. Pipeline user test

  37. You are here: Home > Implement > Test Test • Compatibility • browser & operating system • screen resolution & color depth • Performance • page download & display time • server load (for sites with big audience) • Standards • Standards conformity (HTML, CSS, etc.) • Adherence to accessibility guidelines • Spell checking e.g. NetMechanic

  38. You are here: Home OUR Process • PlanI want ______. • AnalyzeFact finding. • DesignPutting the ideas on paper. • ImplementCode. Test. Repeat. • LaunchLet’s get it out. • MaintainKeep it fresh. Keep it working.

  39. You are here: Home > Launch Launch • Final testing • cross-browser compatibility • Link consistency • Advertise to search engines • Link from other sites • Classic advertising • Cards in dining hall • Flyers in dorms, academic buildings • E-mail

  40. You are here: Home OUR Process • PlanI want ______. • AnalyzeFact finding. • DesignPutting the ideas on paper. • ImplementCode. Test. Repeat. • LaunchLet’s get it out. • MaintainKeep it fresh. Keep it working.

  41. You are here: Home > Maintain Maintain • Update content regularly • Verify link consistency • Read and answer users feedback • Analyze web server log • Analyze search engine logs

  42. You are here: Home > Redesign Redesign • If: • Audience or needs change • You want a new look • You can do it better now • Then: Start again at Step 1: “Plan”

  43. You are here: Home > Resources > Books Books • Steve Krug: “Don’t make me think” • Jakob Nielsen: “Designing Web Usability” • Louis Rosenfeld, Peter Morville: “Information Architecture for the World Wide Web” • Robin Williams: “The Non-Designer’s Design Book” • “Webster’s New World Dictionary of Computer Terms” • More suggestions:www.ward.vt.edu/toolkit/books.phtml

  44. You are here: Home > Resources > Online Readings Online Readings • www.webtechniques.com • www.webreview.com • www.webmonkey.com • www.webreference.com • www.builder.com • www.useit.com • www.ward.vt.edu • James Powell: “50+ Questions you need to answer as you design a website”, www.ward.vt.edu/pubs/WebDesign.htm

More Related