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.
This presentation is based on alan november’s book
Differences Between Effective and Ineffective Web 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
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
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
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
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
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
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
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
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
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
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
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
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
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