Download
web design n.
Skip this Video
Loading SlideShow in 5 Seconds..
Web Design PowerPoint Presentation

Web Design

179 Views Download Presentation
Download Presentation

Web Design

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Web Design IT 130 Robin Burke

  2. Outline • Bad design • Usability • Design Process • High-level • Usability Testing • Design Layers • Page Design

  3. Good Design through Bad • Example

  4. Task #1 • Arthur Murray Dance Studios • What does Arthur Murray teach in its advanced classes? • Find a dance studio in Illinois

  5. Task #2 • National Association for Child Development • Find the address of the Chicago chapter of the NACD

  6. Task #3 • Monona, WI • Pay your real estate taxes online. • What's the weather in Monona?

  7. What makes a design bad?

  8. Usability • Learnability • first time user • Efficiency • speed of task performance • Memorability • next visit • Errors • accuracy of interaction • Satisfaction • pleasant to use

  9. 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

  10. More problems • Technology not user focus • History Wired • Busy-ness • Arngren Electronics

  11. Benefits of good design • Confused customers leave • lost sales • Confused employees waste time • training costs • errors • Spend 10% budget on usability • 2x quality measures

  12. How to have a good design • Basic principles of user interface • Good design process

  13. 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?

  14. 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

  15. Goal • Many possible purposes • convince • sell • amuse • aesthetic response • Key • site must effectively support goal

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

  17. 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

  18. 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

  19. 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?

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

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

  22. Exercise • Low-fi prototype • search for CTI internship possibilities • what does the form look like? • what does the response look like?

  23. 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

  24. 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?

  25. 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?

  26. 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

  27. Example • www.mlb.com • audience • content / functionality • page design

  28. 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

  29. Page design • Presenting content • text • form widgets • images • media • Presenting navigational tools • links • other controls

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

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

  32. also, whitespace

  33. Position • Top left • most important • Bottom • less important • Off-screen (requiring scrolling) • least important • many users will never see

  34. 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

  35. Examples • anti-example • animation hell • example • Sun Micosystems

  36. 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

  37. Examples • anti-example: internal page from NACD • example: internal page from Microsoft

  38. 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

  39. Examples • anti-example: Monona • example: amazon.com

  40. Simplicity • Principle • web pages are small • stick to the essentials • don't try to pack everything in • Consequence • use meaningful links to avoid scrolling

  41. Examples • anti-example: Arngren • example: Jakob Nielsen • example? LA Times

  42. Homework #6 • Simple user-centered design exercise • Design and draw 4 pages • political site • Get 4 subjects to use • Report results • Pair project

  43. Important points • Prototypes must be hand-drawn • Report & prototypes must be submitted in class