design
DESCRIPTION
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.TRANSCRIPT
Differences between effective and ineffective design for the presentation of information
online
By Christine Laubenstein
Topics to be discussed
1. Why is web design important?2. Elements of design to be addressed3. Characteristics of effective web design, along
with sources and examples4. Highlights of research5. Problems I encountered6. Solutions employed7. Conclusion8. Audience feedback
1. Why should I care about web design?
Image from www.flickr.com/photos/seandreilinger/2326448445
2. Elements of design to be addressed
1. Placement of information2. Page size3. Font4. Color5. Pictures, videos and animations6. Writing style7. Links8. Lists9. Navigation10. Homepage11. Fields12. Other
3. Characteristics of effective web design
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
Good example
www.gimbalscandy.com/buy-now
Bad example
www.wisegeek.com/how-do-i-become-a-physics-professor.htm
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
Good example
www.chick-fil-a.com/#home
Bad example
na.blackberry.com/eng/
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
Good example
www.viperchill.com
Bad example
www.pudgiespizza.com
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
Good example
www.riddleshedgehogs.com/our-herd
Bad example
www.bostonenvironmentalgroup.com
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
Good example
www.thebiketraderonline.com/browse/Bicycles
Bad example
www.chinookwindscasino.com/index.php?option=com_content&view=article&id=123&Itemid=105
Writing style
• Sentences are short• Paragraphs are short• No jargon• Few acronyms• Acronyms and abbreviations are identified
Sources: Usability.gov, Jakob Nielsen, Peter Meyers
Good example
cheme.berkeley.edu/faculty/reimer
Bad example
www.physics.cornell.edu/people/faculty/?page=website/faculty&action=show/id=1
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
Good example
www.savoryspiceshop.com/spices/dillweed.html
Bad example
www.dennisgrp.com/index.php-id=6.htm
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
Good example
alafrench.com
Bad example
www.elitebuildings.com/products-services
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
Good example
www.miami.edu/index.php/admission
Bad example
www.natural-salt-lamps.com/saltcrystallamps.html
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
Good example
www.sullivansolarpower.com
Bad example
www.crystalinks.com/rainbows.html
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
Good example
www.papajohnsonline.com/customer_signup.jsp
Bad example
www.literacyhelp.org/shipping.php
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
Good example
www.juniper.net/us/en/solutions/enterprise/security-compliance/compliance
Bad example
www.usgulftrading.com/index.php?main_page=index&cPath=8
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
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
6. Solutions employed
Problem Solution
Too much information Created chart, narrowed down
Getting all information from one source Stop using that source
Couldn’t find some examples Settled for OK ones
Contradictory information Didn’t address particular topic
Didn’t back up research /presentations and lost them
Used Google Web History to recover what I could
“The solution of every problem is another problem.” – Johan Wolfgang von Goethe
7. Conclusion
8. Any questions/comments?