Web Design Guide

Designing for the Web  Web site design  Web page design  Web usability 1 Your Goal  Create a web site that is:      useful compelling attractive easy to use satisfying 2 Web Development Team        Content provider Information architect Graphic designer Writer / editor Programmer Project Manager Usability Expert 3 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? 4 Site Design  Content  Organization  Navigation system 5 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? 6 Activity #1  Develop a mission statement  one sentence  must contain audience, purpose, and content  Develop an initial inventory of content  on your own 7 Organization Schemes     White pages Yellow pages Supermarket Your computer 8 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 9 Navigation System  How do I get home?  Where am I?  Where else can I go? 10 Examples  across the top  down the left side 11 Additional Navigation  Site map  overall view  Index  alphabetical list of terms  Search facility  requires special expertise 12 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 13 Activity #2      refrigerator socks living room dictionary milk      bureau kitchen bookshelf bedroom a live elephant 14 Web Page Design  KISS 15 Home Page     What can I do at this site? No scrolling should be necessary! Attractive This is your first impression 16 Web Writing  remember visitors only scan  keep it short  at least 50% of normal text  use headings  use bullet lists  put conclusion first 17 Common Page Guidelines     dark text on light background limit visitor scrolling limit use of images limit use of animations 18 Be Aware of Browser Features  Back button  do not provide your own  Colored links  do not change default  Bookmarks  provide meaningful title 19 Proofread  errors will kill the professional appearance of your site  use a spell checker  use a grammar checker?  ask someone else to check grammar 20 Web Usability Measures      What are some indications of ‘user friendly’? Ease of learning Improved user performance Low user error rate User satisfaction 21 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? 22 Usability Evaluation Strategies  Checklist  User testing  Usability inspection  bring in a usability expert 23 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? 24 User Testing     Identify appropriate users Select appropriate tasks Watch, listen, but don’t talk! Ask volunteers to complete a survey 25 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 26 Some Sample Sites  Let’s take a look at some of your favorite sites…. 27 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? 28 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.ht ml  Link Checking Software  Xenu's Link Sleuth - freeware  http://home.snafu.de/tilman/xenulink.html 29 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 30 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 31