Your SlideShare is downloading. ×
0
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Web+Design+Guide[1]
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web+Design+Guide[1]

620

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. 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. 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. Site Design <ul><li>Content </li></ul><ul><li>Organization </li></ul><ul><li>Navigation system </li></ul>
  • 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. 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. 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. 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. 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. Examples <ul><li>across the top </li></ul><ul><li>down the left side </li></ul>
  • 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. 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. 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. Web Page Design <ul><li>KISS </li></ul>
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Some Sample Sites <ul><li>Let’s take a look at some of your favorite sites…. </li></ul>
  • 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. 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. 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. 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>

×