 |
Return to Class Session #3 |
 |
| "It
is certainly possible to have a web site that is worse for your business
than no web site at all...Whoever is making a web page, no matter what it
looks like, is moving forward and trying new things...in the empowerment of
this media..." |
| |
Williams & Tollett |
| Do's
& Don'ts/Site & Page Design Tips for Content |
Everyone has an opinion.
It's not necessary or even helpful to trash someone's communication and design
efforts. Even a "dorky"
site is the product of good intention and differing tastes, while moving a
step forward. Even pretty good sites can be critically analyzed and improved.
The big "but" that you hear coming is that there is a body of
knowledge on what makes for a better-designed site and it is not a matter of
making a page prettier or enforcing an aesthetic standard so much as it is a
matter of communicating more effectively.
We will look at many people's
ideas for do's & don'ts, and tips for designing for effective content.
Remember, these are rules that usually work and give you good advice. They
may be broken but should not be
broken without a clear purpose for doing so that overrides the inherent value
they offer to your site and page effectiveness by following them.
Williams and Tollett give
us a nice checklist in their
excellent book "The Non-designer's Web Book."
| Not-so-Good
Checklist |
Backgrounds
- Gray default background color
- Color combinations of text and background that
make the text hard to read
- Busy, distracting backgrounds that make the
text hard to read
|
Text
- Text crowding against the left edge
- Text that stretches all the way across the page
- Centered type over flush left body copy
- Paragraphs of type in all caps
- Paragraphs of type in bold
- Paragraphs of type in italic
- Paragraphs of type in all caps, bold, and
italic all at once
|
Links
-
Default blue links
- Blue link borders around graphics
- Links that are not clear about where they will take you to
- Links in body copy that distract readers and lead them off to remote,
useless pages
- Text links that are not underlined so you don't know it's a link
- Dead links (links that don't work anymore)
- Orphan
Pages (links that lead to an "orphan
page" with no return links)
|
Graphics
-
Large graphic files that take forever to download
- Meaningless or useless graphic files
- Thumbnail images that are nearly as large as the full-sized images
they link to
- Graphics with 'halos' of icky stuff (called anti-aliasing
'artifacts') around the edges
- Graphics with no alt labels
- Missing graphics, especially missing graphics with no alt labels
- Graphics that don't fit on the screen
|
Tables
- Borders turned on in tables
- Tables used as design elements, especially with extra large (dorky)
borders
|
Blinking and Animations
- Anything that blinks, especially text
- Multiple things that blink
- Rainbow rules
- Rainbow rules that blink or animate
- Under construction' signs, especially of little men working
- Animated 'under construction' signs
- Animated pictures for e-mail
- Animations that never stop
-
Multiple animations that never stop
|
Junk
- Counters on pages-does anyone care?
- Junky advertising
- Having to scroll sideways (horizontally)
- Too many little pictures on the first page of awards that don't mean
anything
|
Navigation
- Unclear navigation; overly complex navigation
- Complicated frames, too many frames, unnecessary scrollbars in
frames
- Orphan pages (no links back to where they came from, no
identification)
- Useless page titles that don't explain what the page is about
|
General Design
- Entry page or home page that does not fit within standard browser
window (640 x 460 pixels) (Monitor defaults are 72 pixels per inch
Mac; pc is 96 pixels per inch)
- No focal point on the page
- Too many focal points on a page
- Navigation buttons as the only visual interest, especially when
they're large (and dorky)
- Cluttered, not enough alignment
- Lack of contrast (in color, text, to create hierarchy of info, etc.)
- Pages that look okay in one browser but not in another
|
| So-Much-Better-Checklist |
Text
- Background does not interrupt the text
- Text is big enough to read, but not too big
- The hierarchy of information is perfectly clear
- Columns of text are narrower than in a book to make reading easier
on the screen
|
Navigation
- Navigation buttons and bars are easy to understand and use
- Frames, if used, are not obtrusive
- A large site has an index or site map
|
Links
- Link colors coordinate with page colors
- Links are underlined so they are instantly clear to the
visitor
- The links give the visitor a clue as to where they are, what page they are currently on
|
Graphics
- Every graphic has an alt label
- Every graphic link has a matching text link
- Buttons are not big and dorky
- Graphics and backgrounds use browser-safe colors
- Animated graphics turn off by themselves
|
General Design
- Pages download quickly
- First page and home page fit into 640 x 460 space
- All other pages have the important stuff in 640 x 460
- Good use of graphic elements (photos, subheads, pull quotes) to break
up large areas of text
- Every web page in the site looks like it belongs to the same site;
there are repetitive elements that carry throughout the pages
|
| Jakob Neilson's Top
10 and NEW Top 10 Web Design
Mistakes |
Top Ten Web Design Mistakes http://www.useit.com/alertbox/990502.html
New Top Ten Web Design Mistakes http://www.useit.com/alertbox/990530.html
| Tips on Names, File Names and Site Organization: |
Layout and Navigation Tips - some broad rules of thumb
are:
- Three clicks maximum to get the user to their destination
- use page navigation
frequently: "to top"
- Keep paragraphs short - 4 lines is good (not sentences)
- Use columns (tables) for lots of text; the screen is too wide for reading all the
way across and keeping your place as you would in a book.
- Don't underline words that aren't links
- Too-long pages - two to three screens lengths max unless really necessary
Things People Say They Hate - ads, big images, strange errors and
error messages, under construction, fad items repeated everywhere, new windows
popping up unexpectedly, getting lost, bad searches, theme music that doesn't
match your mood, broken links, horizontal scrolling, stretched images, slow
loads, functions promised and not delivered, restricted numbers of searches,
entries or quotes, orphan pages, etc.
Shopping Site Do's -
- inventory links that
tell you it's sold out, in stock, available in "x" days, only
six left, etc.
- easy adds/deletes of items and options already in shopping cart
- indication of delivery times
- immediate acknowledgement of orders and invoice info
- great customer service and support, 24 hours, no excuses
An Interesting "Eye-tracking Study" of
how Users read Web Pages:
http://www.mediainfo.com/ephome/news/newshtm/stop/st050300.htm
Note: Jakob Nielsen in his book Designing Web Usability has
two
excellent chapters (chapters 3 & 4) with outstanding examples of both
content design and site design tips, do's and don'ts.
