Web Design Guidelines by Scott Grissom 1 Designing for the Web  Web site design  Web page design  Web usability  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  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  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?  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  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?  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  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  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  no more than seven categories  three clicks and you are there Home Page Topic 1Topic 2Topic 3Topic 4Topic 5Topic 7Topic

Web Design Guidelines by Scott Grissom 10 Navigation System  How do I get home?  Where am I?  Where else can I go?  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  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  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  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 Activity #2  refrigerator  socks  living room  dictionary  milk  refrigerator  socks  living room  dictionary  milk  bureau  kitchen  bookshelf  bedroom  a live elephant  bureau  kitchen  bookshelf  bedroom  a live elephant

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  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  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  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  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  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  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?  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  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?  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  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 easy Appearance of the site was: ugly beautiful Overall, the site was: really sucky excellent  Strive for unbiased questions  Use a rating scale 1-5 Finding the information was: difficult easy Appearance of the site was: ugly beautiful Overall, the site was: really sucky 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?  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   Yale Web Style Guide  ml  Link Checking Software  Xenu's Link Sleuth - freeware   Usable Web  the mother of all sites   Yale Web Style Guide  ml  Link Checking Software  Xenu's Link Sleuth - freeware 

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