Design

892 views
848 views

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.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
892
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Design

  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 www.flickr.com/photos/seandreilinger/2326448445<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, Usability.gov<br />
  7. 7. Good example<br />www.gimbalscandy.com/buy-now<br />
  8. 8. Bad example<br />www.wisegeek.com/how-do-i-become-a-physics-professor.htm<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, Usability.gov, Jakob Nielsen<br />
  10. 10. Good example<br />www.chick-fil-a.com/#home<br />
  11. 11. Bad example<br />na.blackberry.com/eng/<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: Usability.gov, Dr. Ralph Wilson, Daniel Will-Harris, The Yahoo! Style Guide<br />
  13. 13. Good example<br />www.viperchill.com<br />
  14. 14. Bad example<br />www.pudgiespizza.com<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 />Usability.gov; Michael Bernard, Barbara Chaparro, and R. Thomasson<br />
  16. 16. Good example<br />www.riddleshedgehogs.com/our-herd<br />
  17. 17. Bad example<br />www.bostonenvironmentalgroup.com<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: Usability.gov, Jakob Nielsen and Marie Tahir, Jared Spool<br />
  19. 19. Good example<br />www.thebiketraderonline.com/browse/Bicycles<br />
  20. 20. Bad example<br />www.chinookwindscasino.com/index.php?option=com_content&view=article&id=123&Itemid=105<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: Usability.gov, Jakob Nielsen, Peter Meyers<br />
  22. 22. Good example<br />cheme.berkeley.edu/faculty/reimer<br />
  23. 23. Bad example<br />www.physics.cornell.edu/people/faculty/?page=website/faculty&action=show/id=1<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: Usability.gov, Jakob Nielsen<br />
  25. 25. Good example<br />www.savoryspiceshop.com/spices/dillweed.html<br />
  26. 26. Bad example<br />www.dennisgrp.com/index.php-id=6.htm<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: Usability.gov, David McMurrey<br />
  28. 28. Good example<br />alafrench.com<br />
  29. 29. Bad example<br />www.elitebuildings.com/products-services<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, Usability.gov<br />
  31. 31. Good example<br />www.miami.edu/index.php/admission<br />
  32. 32. Bad example<br />www.natural-salt-lamps.com/saltcrystallamps.html<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, Usability.gov, United States Computer Emergency Readiness Team, Jakob Nielsen<br />
  34. 34. Good example<br />www.sullivansolarpower.com<br />
  35. 35. Bad example<br />www.crystalinks.com/rainbows.html<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: Usability.gov, Jakob Nielsen<br />
  37. 37. Good example<br />www.papajohnsonline.com/customer_signup.jsp<br />
  38. 38. Bad example<br />www.literacyhelp.org/shipping.php<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, Usability.gov<br />
  40. 40. Good example<br />www.juniper.net/us/en/solutions/enterprise/security-compliance/compliance<br />
  41. 41. Bad example<br />www.usgulftrading.com/index.php?main_page=index&cPath=8<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 />

×