1 / 43

Web Design

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?

casper
Download Presentation

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

More Related