Published on

This slideshow discusses the differences between effective and ineffective design for the presentation of information online. It includes screenshot examples of good design and poor design.

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Differences between effective and ineffective design for the presentation of information online<br />By Christine Laubenstein<br />
  2. 2. Topics to be discussed<br />Why is web design important?<br />Elements of design to be addressed<br />Characteristics of effective web design, along with sources and examples<br />Highlights of research<br />Problems I encountered<br />Solutions employed<br />Conclusion<br />Audience feedback<br />
  3. 3. 1. Why should I care about web design? <br />Image from<br />
  4. 4. 2. Elements of design to be addressed<br />Placement of information<br />Page size<br />Font<br />Color<br />Pictures, videos and animations<br />Writing style<br />Links<br />Lists<br />Navigation<br />Homepage<br />Fields<br />Other<br />
  5. 5. 3. Characteristics of effective web design<br />
  6. 6. Placement of information<br />Most important information above fold<br />Most important information at left<br />Secondary information at right<br />Some important information at bottom<br />Page isn’t cluttered<br />Information organized clearly<br />Sources: Jakob Nielsen,<br />
  7. 7. Good example<br /><br />
  8. 8. Bad example<br /><br />
  9. 9. Page size<br />Page shouldn’t be long<br />Page doesn’t require horizontal scrolling<br />Page shouldn’t take too long to load<br />Sources: Wayne Neale and Cindy McCombe,, Jakob Nielsen<br />
  10. 10. Good example<br /><br />
  11. 11. Bad example<br /><br />
  12. 12. Font<br />Font is big enough (at least 12 pt.)<br />Font is sans serif<br />Font has large x-height<br />All caps not used<br />Not too much bold<br />Font for headings is bigger and/or bolded<br />Sources:, Dr. Ralph Wilson, Daniel Will-Harris, The Yahoo! Style Guide<br />
  13. 13. Good example<br /><br />
  14. 14. Bad example<br /><br />
  15. 15. Colors<br />Font is dark on light background<br />Include white space<br />Colors used to organize content<br />Information delivery is not color dependent<br />; Michael Bernard, Barbara Chaparro, and R. Thomasson<br />
  16. 16. Good example<br /><br />
  17. 17. Bad example<br /><br />
  18. 18. Pictures, videos and animations<br />Thumbnails used<br />No moving logos<br />Videos don’t start automatically<br />No distracting background images<br />Images don’t look like banner ads<br />Ornamental graphics are relevant<br />Sources:, Jakob Nielsen and Marie Tahir, Jared Spool<br />
  19. 19. Good example<br /><br />
  20. 20. Bad example<br /><br />
  21. 21. Writing style<br />Sentences are short<br />Paragraphs are short<br />No jargon<br />Few acronyms<br />Acronyms and abbreviations are identified<br />Sources:, Jakob Nielsen, Peter Meyers<br />
  22. 22. Good example<br /><br />
  23. 23. Bad example<br /><br />
  24. 24. Links<br />Links direct to other pages on site<br />Text links are used, not picture links<br />Items that look like links actually link<br />Link names match up with destination pages<br />Links change colors when visited<br />Sources:, Jakob Nielsen<br />
  25. 25. Good example<br /><br />
  26. 26. Bad example<br /><br />
  27. 27. Lists<br />Bullets and numbering are used appropriately<br />Vertical list for more than three items<br />List is in a logical order<br />Important information at top<br />List is introduced with descriptive sentence<br />Instructions are written in the affirmative<br />Sources:, David McMurrey<br />
  28. 28. Good example<br /><br />
  29. 29. Bad example<br /><br />
  30. 30. Navigation<br />Navigational options are provided<br />All pages link back to homepage<br />Search is included<br />Pages don’t open in new windows<br />PDF use is limited<br />Sources: Jakob Nielsen, Wayne Neale and Cindy McCombe,<br />
  31. 31. Good example<br /><br />
  32. 32. Bad example<br /><br />
  33. 33. Homepage<br />Links to major sections of site<br />Includes company name and/or logo<br />Includes summary<br />Has contact info or link to contact info<br />Has clear path to company information<br />Sources: Peter Meyers,, United States Computer Emergency Readiness Team, Jakob Nielsen<br />
  34. 34. Good example<br /><br />
  35. 35. Bad example<br /><br />
  36. 36. Fields<br />Cursor is automatically in first field<br />Clear labels close to fields<br />Large data items split up<br />Required fields are noted<br />Order forms not too long<br />Sources:, Jakob Nielsen<br />
  37. 37. Good example<br /><br />
  38. 38. Bad example<br /><br />
  39. 39. Other<br />Everything is considered<br />Useful content<br />Actions are easy to undo<br />Headings are used<br />Buttons close to object they’re acting upon<br />Sources: Jared Spool, Jakob Nielsen,<br />
  40. 40. Good example<br /><br />
  41. 41. Bad example<br /><br />
  42. 42. 4. Highlights of research<br />Guidelines are based on research<br />I know where to look in the future<br />Learned new guidelines, like ones about ornamental images and the bottom of the page<br />Applied research to “real world”<br />Learned how to do a presentation<br />
  43. 43. 5. Problems encountered<br />Too much information<br />Was getting all information from one source<br />Couldn’t find some examples<br />Contradictory information<br />Didn’t back up research/presentations and lost them<br />“A problem is a chance for you to do your best.” – Duke Ellington<br />
  44. 44. 6. Solutions employed<br />“The solution of every problem is another problem.” – Johan Wolfgang von Goethe<br />
  45. 45. 7. Conclusion<br />
  46. 46. 8. Any questions/comments?<br />