Designing for the Web

1. Designing for the Web • Web site design • Web page design • Web usability Web Design Guidelines by Scott Grissom

2. Your Goal • Create a web site that is: • useful • compelling • attractive • easy to use • satisfying Web Design Guidelines by Scott Grissom

3. Web Development Team • Content provider • Information architect • Graphic designer • Writer / editor • Programmer • Project Manager • Usability Expert Web Design Guidelines by Scott Grissom

4. Mission Statement • What are you creating and why? • Who will use it? • What will they want to do? • How will you know if your site is successful? Web Design Guidelines by Scott Grissom

5. Site Design • Content • Organization • Navigation system Web Design Guidelines by Scott Grissom

6. Content • What do your visitors want? • What information do you want to provide? • What do similar organizations provide? • What do you already have? • What do you need to create? Web Design Guidelines by Scott Grissom

7. Activity #1 • Develop a mission statement • one sentence • must contain audience, purpose, and content • Develop an initial inventory of content • on your own Web Design Guidelines by Scott Grissom

8. Organization Schemes • White pages • Yellow pages • Supermarket • Your computer Web Design Guidelines by Scott Grissom

9. Hierarchy • no more than seven categories • three clicks and you are there Home Page Topic 1 Topic 2 Topic 3 Topic 4 Topic 5 Topic 6 Topic 7 1 2 3 4 5 6 7 Web Design Guidelines by Scott Grissom

10. Navigation System • How do I get home? • Where am I? • Where else can I go? Web Design Guidelines by Scott Grissom

11. Examples • across the top • down the left side Web Design Guidelines by Scott Grissom

12. Additional Navigation • Site map • overall view • Index • alphabetical list of terms • Search facility • requires special expertise Web Design Guidelines by Scott Grissom

13. Labels are important • Strive to make labels clear & concise • Be consistent • Follow convention • Home / Main • Search / Find • Contact Us • About Us • Help / FAQ • News / What’s New Web Design Guidelines by Scott Grissom

14. refrigerator socks living room dictionary milk bureau kitchen bookshelf bedroom a live elephant Activity #2 Web Design Guidelines by Scott Grissom

15. Web Page Design • KISS Web Design Guidelines by Scott Grissom

16. Home Page • What can I do at this site? • No scrolling should be necessary! • Attractive • This is your first impression Web Design Guidelines by Scott Grissom

17. Web Writing • remember visitors only scan • keep it short • at least 50% of normal text • use headings • use bullet lists • put conclusion first Web Design Guidelines by Scott Grissom

18. Common Page Guidelines • dark text on light background • limit visitor scrolling • limit use of images • limit use of animations Web Design Guidelines by Scott Grissom

19. Be Aware of Browser Features • Back button • do not provide your own • Colored links • do not change default • Bookmarks • provide meaningful title Web Design Guidelines by Scott Grissom

20. Proofread • errors will kill the professional appearance of your site • use a spell checker • use a grammar checker? • ask someone else to check grammar Web Design Guidelines by Scott Grissom

21. Web Usability Measures • What are some indications of ‘user friendly’? • Ease of learning • Improved user performance • Low user error rate • User satisfaction Web Design Guidelines by Scott Grissom

22. Web Design Guidelines • Know the user • Involve the user during design • Design a navigation system • Where am I? • How can I get home? • Where else can I go? Web Design Guidelines by Scott Grissom

23. Usability Evaluation Strategies • Checklist • User testing • Usability inspection • bring in a usability expert Web Design Guidelines by Scott Grissom

24. Usability Checklist • Are all links correct? • Is there a link to home on every page? • Is navigation consistent on every page? • Does each page have an appropriate title? • Did I proofread all content? • Create user profiles • can they do what they will likely want to do? Web Design Guidelines by Scott Grissom

25. User Testing • Identify appropriate users • Select appropriate tasks • Watch, listen, but don’t talk! • Ask volunteers to complete a survey Web Design Guidelines by Scott Grissom

26. A Typical Survey • Strive for unbiased questions • Use a rating scale 1-5 Finding the information was: difficult 1 2 3 4 5 easy Appearance of the site was: ugly 1 2 3 4 5 beautiful Overall, the site was: really sucky 1 2 3 4 5 excellent Web Design Guidelines by Scott Grissom

27. Some Sample Sites • Let’s take a look at some of your favorite sites…. Web Design Guidelines by Scott Grissom

28. Activity #3 • Go to a competitors site • Kick the tires and look for usability problems • What do you like? • What do you think will cause problems? • What do you hate? Web Design Guidelines by Scott Grissom

29. Additional Resources • Usable Web • the mother of all sites • http://www.usableweb.com/ • Yale Web Style Guide • http://info.med.yale.edu/caim/manual/contents.html • Link Checking Software • Xenu's Link Sleuth - freeware • http://home.snafu.de/tilman/xenulink.html Web Design Guidelines by Scott Grissom

30. Summary (1) • Web site design • start with a mission statement • plan and organize the site • design a navigation system • Web page design • be concise • be consistent • proofread Web Design Guidelines by Scott Grissom

31. Summary (2) • Web usability • you are NOT the typical visitor • find out what problems the typical visitor has with your site • Web Usability Evaluation • discover usability problems BEFORE it is too late Web Design Guidelines by Scott Grissom