Design

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?