0
Designing for the Web <ul><li>Web site design </li></ul><ul><li>Web page design </li></ul><ul><li>Web usability </li></ul>
Your Goal <ul><li>Create a web site that is: </li></ul><ul><ul><li>useful </li></ul></ul><ul><ul><li>compelling </li></ul>...
Web Development Team <ul><li>Content provider </li></ul><ul><li>Information architect </li></ul><ul><li>Graphic designer <...
Mission Statement <ul><li>What are you creating and why? </li></ul><ul><li>Who will use it? </li></ul><ul><li>What will th...
Site Design <ul><li>Content </li></ul><ul><li>Organization </li></ul><ul><li>Navigation system </li></ul>
Content <ul><li>What do your visitors want? </li></ul><ul><li>What information do you want to provide? </li></ul><ul><li>W...
Activity #1 <ul><li>Develop a mission statement </li></ul><ul><ul><li>one sentence </li></ul></ul><ul><ul><li>must contain...
Organization Schemes <ul><li>White pages </li></ul><ul><li>Yellow pages </li></ul><ul><li>Supermarket </li></ul><ul><li>Yo...
Hierarchy <ul><li>no more than seven categories </li></ul><ul><li>three clicks and you are there </li></ul>Home Page Topic...
Navigation System <ul><li>How do I get home? </li></ul><ul><li>Where am  I? </li></ul><ul><li>Where else can I go? </li></ul>
Examples <ul><li>across the top </li></ul><ul><li>down the left side </li></ul>
Additional Navigation <ul><li>Site map </li></ul><ul><ul><li>overall view </li></ul></ul><ul><li>Index </li></ul><ul><ul><...
Labels are important <ul><li>Strive to make labels clear & concise </li></ul><ul><li>Be consistent </li></ul><ul><li>Follo...
Activity #2 <ul><li>refrigerator </li></ul><ul><li>socks </li></ul><ul><li>living room </li></ul><ul><li>dictionary </li><...
Web Page Design <ul><li>KISS </li></ul>
Home Page <ul><li>What can I do at this site? </li></ul><ul><li>No scrolling should be necessary! </li></ul><ul><li>Attrac...
Web Writing <ul><li>remember visitors only scan </li></ul><ul><li>keep it short </li></ul><ul><ul><li>at least 50% of norm...
Common Page Guidelines <ul><li>dark text on light background </li></ul><ul><li>limit visitor scrolling </li></ul><ul><li>l...
Be Aware of Browser Features <ul><li>Back button </li></ul><ul><ul><li>do not provide your own </li></ul></ul><ul><li>Colo...
Proofread <ul><li>errors will kill the professional appearance of your site </li></ul><ul><li>use a spell checker </li></u...
Web Usability Measures <ul><li>What are some indications of ‘user friendly’? </li></ul><ul><li>Ease of learning </li></ul>...
Web Design Guidelines <ul><li>Know the user </li></ul><ul><li>Involve the user during design </li></ul><ul><li>Design a na...
Usability Evaluation Strategies <ul><li>Checklist </li></ul><ul><li>User testing </li></ul><ul><li>Usability inspection </...
Usability Checklist <ul><li>Are all links correct? </li></ul><ul><li>Is there a link to home on every page? </li></ul><ul>...
User Testing <ul><li>Identify appropriate users  </li></ul><ul><li>Select appropriate tasks </li></ul><ul><li>Watch, liste...
A Typical Survey <ul><li>Strive for unbiased questions </li></ul><ul><li>Use a rating scale 1-5 </li></ul><ul><li>Finding ...
Some Sample Sites <ul><li>Let’s take a look at some of your favorite sites…. </li></ul>
Activity #3 <ul><li>Go to a competitors site </li></ul><ul><li>Kick the tires and look for usability problems </li></ul><u...
Additional Resources <ul><li>Usable Web </li></ul><ul><ul><li>the mother of all sites </li></ul></ul><ul><ul><li>http://ww...
Summary (1) <ul><li>Web site design </li></ul><ul><ul><li>start with a mission statement </li></ul></ul><ul><ul><li>plan a...
Summary (2) <ul><li>Web usability </li></ul><ul><ul><li>you are NOT the typical visitor </li></ul></ul><ul><ul><li>find ou...
Upcoming SlideShare
Loading in...5
×

Web+Design+Guide[1]

622

Published on

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
622
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
60
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Web+Design+Guide[1]"

  1. 1. Designing for the Web <ul><li>Web site design </li></ul><ul><li>Web page design </li></ul><ul><li>Web usability </li></ul>
  2. 2. Your Goal <ul><li>Create a web site that is: </li></ul><ul><ul><li>useful </li></ul></ul><ul><ul><li>compelling </li></ul></ul><ul><ul><li>attractive </li></ul></ul><ul><ul><li>easy to use </li></ul></ul><ul><ul><li>satisfying </li></ul></ul>
  3. 3. Web Development Team <ul><li>Content provider </li></ul><ul><li>Information architect </li></ul><ul><li>Graphic designer </li></ul><ul><li>Writer / editor </li></ul><ul><li>Programmer </li></ul><ul><li>Project Manager </li></ul><ul><li>Usability Expert </li></ul>
  4. 4. Mission Statement <ul><li>What are you creating and why? </li></ul><ul><li>Who will use it? </li></ul><ul><li>What will they want to do? </li></ul><ul><li>How will you know if your site is successful? </li></ul>
  5. 5. Site Design <ul><li>Content </li></ul><ul><li>Organization </li></ul><ul><li>Navigation system </li></ul>
  6. 6. Content <ul><li>What do your visitors want? </li></ul><ul><li>What information do you want to provide? </li></ul><ul><li>What do similar organizations provide? </li></ul><ul><li>What do you already have? </li></ul><ul><li>What do you need to create? </li></ul>
  7. 7. Activity #1 <ul><li>Develop a mission statement </li></ul><ul><ul><li>one sentence </li></ul></ul><ul><ul><li>must contain audience, purpose, and content </li></ul></ul><ul><li>Develop an initial inventory of content </li></ul><ul><ul><li>on your own </li></ul></ul>
  8. 8. Organization Schemes <ul><li>White pages </li></ul><ul><li>Yellow pages </li></ul><ul><li>Supermarket </li></ul><ul><li>Your computer </li></ul>
  9. 9. Hierarchy <ul><li>no more than seven categories </li></ul><ul><li>three clicks and you are there </li></ul>Home Page Topic 1 Topic 2 Topic 3 Topic 4 Topic 5 Topic 7 Topic 6 1 3 4 5 6 2 7
  10. 10. Navigation System <ul><li>How do I get home? </li></ul><ul><li>Where am I? </li></ul><ul><li>Where else can I go? </li></ul>
  11. 11. Examples <ul><li>across the top </li></ul><ul><li>down the left side </li></ul>
  12. 12. Additional Navigation <ul><li>Site map </li></ul><ul><ul><li>overall view </li></ul></ul><ul><li>Index </li></ul><ul><ul><li>alphabetical list of terms </li></ul></ul><ul><li>Search facility </li></ul><ul><ul><li>requires special expertise </li></ul></ul>
  13. 13. Labels are important <ul><li>Strive to make labels clear & concise </li></ul><ul><li>Be consistent </li></ul><ul><li>Follow convention </li></ul><ul><ul><li>Home / Main </li></ul></ul><ul><ul><li>Search / Find </li></ul></ul><ul><ul><li>Contact Us </li></ul></ul><ul><ul><li>About Us </li></ul></ul><ul><ul><li>Help / FAQ </li></ul></ul><ul><ul><li>News / What’s New </li></ul></ul>
  14. 14. Activity #2 <ul><li>refrigerator </li></ul><ul><li>socks </li></ul><ul><li>living room </li></ul><ul><li>dictionary </li></ul><ul><li>milk </li></ul><ul><li>bureau </li></ul><ul><li>kitchen </li></ul><ul><li>bookshelf </li></ul><ul><li>bedroom </li></ul><ul><li>a live elephant </li></ul>
  15. 15. Web Page Design <ul><li>KISS </li></ul>
  16. 16. Home Page <ul><li>What can I do at this site? </li></ul><ul><li>No scrolling should be necessary! </li></ul><ul><li>Attractive </li></ul><ul><li>This is your first impression </li></ul>
  17. 17. Web Writing <ul><li>remember visitors only scan </li></ul><ul><li>keep it short </li></ul><ul><ul><li>at least 50% of normal text </li></ul></ul><ul><li>use headings </li></ul><ul><li>use bullet lists </li></ul><ul><li>put conclusion first </li></ul>
  18. 18. Common Page Guidelines <ul><li>dark text on light background </li></ul><ul><li>limit visitor scrolling </li></ul><ul><li>limit use of images </li></ul><ul><li>limit use of animations </li></ul>
  19. 19. Be Aware of Browser Features <ul><li>Back button </li></ul><ul><ul><li>do not provide your own </li></ul></ul><ul><li>Colored links </li></ul><ul><ul><li>do not change default </li></ul></ul><ul><li>Bookmarks </li></ul><ul><ul><li>provide meaningful title </li></ul></ul>
  20. 20. Proofread <ul><li>errors will kill the professional appearance of your site </li></ul><ul><li>use a spell checker </li></ul><ul><li>use a grammar checker? </li></ul><ul><li>ask someone else to check grammar </li></ul>
  21. 21. Web Usability Measures <ul><li>What are some indications of ‘user friendly’? </li></ul><ul><li>Ease of learning </li></ul><ul><li>Improved user performance </li></ul><ul><li>Low user error rate </li></ul><ul><li>User satisfaction </li></ul>
  22. 22. Web Design Guidelines <ul><li>Know the user </li></ul><ul><li>Involve the user during design </li></ul><ul><li>Design a navigation system </li></ul><ul><ul><li>Where am I? </li></ul></ul><ul><ul><li>How can I get home? </li></ul></ul><ul><ul><li>Where else can I go? </li></ul></ul>
  23. 23. Usability Evaluation Strategies <ul><li>Checklist </li></ul><ul><li>User testing </li></ul><ul><li>Usability inspection </li></ul><ul><ul><li>bring in a usability expert </li></ul></ul>
  24. 24. Usability Checklist <ul><li>Are all links correct? </li></ul><ul><li>Is there a link to home on every page? </li></ul><ul><li>Is navigation consistent on every page? </li></ul><ul><li>Does each page have an appropriate title? </li></ul><ul><li>Did I proofread all content? </li></ul><ul><li>Create user profiles </li></ul><ul><ul><li>can they do what they will likely want to do? </li></ul></ul>
  25. 25. User Testing <ul><li>Identify appropriate users </li></ul><ul><li>Select appropriate tasks </li></ul><ul><li>Watch, listen, but don’t talk! </li></ul><ul><li>Ask volunteers to complete a survey </li></ul>
  26. 26. A Typical Survey <ul><li>Strive for unbiased questions </li></ul><ul><li>Use a rating scale 1-5 </li></ul><ul><li>Finding the information was: </li></ul><ul><ul><li>difficult 1 2 3 4 5 easy </li></ul></ul><ul><li>Appearance of the site was: </li></ul><ul><ul><li>ugly 1 2 3 4 5 beautiful </li></ul></ul><ul><li>Overall, the site was: </li></ul><ul><ul><li>really sucky 1 2 3 4 5 excellent </li></ul></ul>
  27. 27. Some Sample Sites <ul><li>Let’s take a look at some of your favorite sites…. </li></ul>
  28. 28. Activity #3 <ul><li>Go to a competitors site </li></ul><ul><li>Kick the tires and look for usability problems </li></ul><ul><li>What do you like? </li></ul><ul><li>What do you think will cause problems? </li></ul><ul><li>What do you hate? </li></ul>
  29. 29. Additional Resources <ul><li>Usable Web </li></ul><ul><ul><li>the mother of all sites </li></ul></ul><ul><ul><li>http://www.usableweb.com/ </li></ul></ul><ul><li>Yale Web Style Guide </li></ul><ul><ul><li>http://info.med.yale.edu/caim/manual/contents.html </li></ul></ul><ul><li>Link Checking Software </li></ul><ul><li>Xenu's Link Sleuth - freeware </li></ul><ul><ul><li>http://home.snafu.de/tilman/xenulink.html </li></ul></ul>
  30. 30. Summary (1) <ul><li>Web site design </li></ul><ul><ul><li>start with a mission statement </li></ul></ul><ul><ul><li>plan and organize the site </li></ul></ul><ul><ul><li>design a navigation system </li></ul></ul><ul><li>Web page design </li></ul><ul><ul><li>be concise </li></ul></ul><ul><ul><li>be consistent </li></ul></ul><ul><ul><li>proofread </li></ul></ul>
  31. 31. Summary (2) <ul><li>Web usability </li></ul><ul><ul><li>you are NOT the typical visitor </li></ul></ul><ul><ul><li>find out what problems the typical visitor has with your site </li></ul></ul><ul><li>Web Usability Evaluation </li></ul><ul><ul><li>discover usability problems BEFORE it is too late </li></ul></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×