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.

1. Differences between effective and ineffective design for the presentation of information online By Christine Laubenstein

2. Topics to be discussed Why is web design important? Elements of design to be addressed Characteristics of effective web design, along with sources and examples Highlights of research Problems I encountered Solutions employed Conclusion Audience feedback

3. 1. Why should I care about web design? Image from www.flickr.com/photos/seandreilinger/2326448445

4. 2. Elements of design to be addressed Placement of information Page size Font Color Pictures, videos and animations Writing style Links Lists Navigation Homepage Fields Other

5. 3. Characteristics of effective web design

6. Placement of information Most important information above fold Most important information at left Secondary information at right Some important information at bottom Page isn’t cluttered Information organized clearly Sources: Jakob Nielsen, Usability.gov

7. Good example www.gimbalscandy.com/buy-now

8. Bad example www.wisegeek.com/how-do-i-become-a-physics-professor.htm

9. Page size Page shouldn’t be long Page doesn’t require horizontal scrolling Page shouldn’t take too long to load Sources: Wayne Neale and Cindy McCombe, Usability.gov, Jakob Nielsen

10. Good example www.chick-fil-a.com/#home

11. Bad example na.blackberry.com/eng/

12. Font Font is big enough (at least 12 pt.) Font is sans serif Font has large x-height All caps not used Not too much bold Font for headings is bigger and/or bolded Sources: Usability.gov, Dr. Ralph Wilson, Daniel Will-Harris, The Yahoo! Style Guide

13. Good example www.viperchill.com

14. Bad example www.pudgiespizza.com

15. Colors Font is dark on light background Include white space Colors used to organize content Information delivery is not color dependent Usability.gov; Michael Bernard, Barbara Chaparro, and R. Thomasson

16. Good example www.riddleshedgehogs.com/our-herd

17. Bad example www.bostonenvironmentalgroup.com

18. Pictures, videos and animations Thumbnails used No moving logos Videos don’t start automatically No distracting background images Images don’t look like banner ads Ornamental graphics are relevant Sources: Usability.gov, Jakob Nielsen and Marie Tahir, Jared Spool

19. Good example www.thebiketraderonline.com/browse/Bicycles

20. Bad example www.chinookwindscasino.com/index.php?option=com_content&view=article&id=123&Itemid=105

21. Writing style Sentences are short Paragraphs are short No jargon Few acronyms Acronyms and abbreviations are identified Sources: Usability.gov, Jakob Nielsen, Peter Meyers

22. Good example cheme.berkeley.edu/faculty/reimer

23. Bad example www.physics.cornell.edu/people/faculty/?page=website/faculty&action=show/id=1

24. Links Links direct to other pages on site Text links are used, not picture links Items that look like links actually link Link names match up with destination pages Links change colors when visited Sources: Usability.gov, Jakob Nielsen

25. Good example www.savoryspiceshop.com/spices/dillweed.html

26. Bad example www.dennisgrp.com/index.php-id=6.htm

27. Lists Bullets and numbering are used appropriately Vertical list for more than three items List is in a logical order Important information at top List is introduced with descriptive sentence Instructions are written in the affirmative Sources: Usability.gov, David McMurrey

28. Good example alafrench.com

29. Bad example www.elitebuildings.com/products-services

30. Navigation Navigational options are provided All pages link back to homepage Search is included Pages don’t open in new windows PDF use is limited Sources: Jakob Nielsen, Wayne Neale and Cindy McCombe, Usability.gov

31. Good example www.miami.edu/index.php/admission

32. Bad example www.natural-salt-lamps.com/saltcrystallamps.html

33. Homepage Links to major sections of site Includes company name and/or logo Includes summary Has contact info or link to contact info Has clear path to company information Sources: Peter Meyers, Usability.gov, United States Computer Emergency Readiness Team, Jakob Nielsen

34. Good example www.sullivansolarpower.com

35. Bad example www.crystalinks.com/rainbows.html

36. Fields Cursor is automatically in first field Clear labels close to fields Large data items split up Required fields are noted Order forms not too long Sources: Usability.gov, Jakob Nielsen

37. Good example www.papajohnsonline.com/customer_signup.jsp

38. Bad example www.literacyhelp.org/shipping.php

39. Other Everything is considered Useful content Actions are easy to undo Headings are used Buttons close to object they’re acting upon Sources: Jared Spool, Jakob Nielsen, Usability.gov

40. Good example www.juniper.net/us/en/solutions/enterprise/security-compliance/compliance

41. Bad example www.usgulftrading.com/index.php?main_page=index&cPath=8

42. 4. Highlights of research Guidelines are based on research I know where to look in the future Learned new guidelines, like ones about ornamental images and the bottom of the page Applied research to “real world” Learned how to do a presentation

43. 5. Problems encountered Too much information Was getting all information from one source Couldn’t find some examples Contradictory information Didn’t back up research/presentations and lost them “A problem is a chance for you to do your best.” – Duke Ellington

44. 6. Solutions employed “The solution of every problem is another problem.” – Johan Wolfgang von Goethe

45. 7. Conclusion

46. 8. Any questions/comments?