Monthly Archives: March 2008

Quality

Quality in design of your web site requires:

• Sensible navigation
• Feedback mechanisms
• Reliability
• A designer who cares about the project and its end users

How do we decide on the final quality in our designs?Ray and I came up with some ideas from several web sites. If you use tried and true definitions of hypermedia quality, you are almost guaranteed to create a quality site.

Text

Based on a meta analysis of research related to cognitive and psychological influences of typography, a digest of ‘best practices’ as they relate to the display of textual information on computer screens follows. (Rehe, 1984)

• Very long and short lines of text make reading more difficult
• Optimal text sizes for general text is between 12pt and 14pt.
• For optimal text sizes, 10 to 12 words per line is ideal.
• For optimal text sizes a line height of 125% improves legibility.
• Type faces of medium weight are recommended.
• Light text on dark background reduces reading speed by as much as 14%.
• White space around or within the text block increases readability.
• The hierarchy of information is perfectly clear

Navigation

• Navigation buttons and bars are easy to understand and use
• Navigation buttons and bars are easy to understand and use
• Navigation is consistent throughout web site
• Navigation buttons and bars provide the visitor with a clue as to where they are, what page of the site they are currently on
• 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
• Make obvious what’s clickable: for text links, use colored, underlined text (and don’t underline non-link text).
• Differentiate visited and unvisited links.
• Explain what users will find at the other end of the link, and include some of the key information-carrying terms in the anchor text itself to enhance scannability and search engine optimization (SEO). Don’t use “click here” or other non-descriptive link text.

Graphics

• Buttons are not big and dorky
• Every graphic has an alt label
• Every graphic link has a matching text link
• Graphics and backgrounds use browser-safe colors
• Animated graphics turn off by themselves

General Design

• Pages download quickly
• Pages fit into a pixel space common to your users� monitors
• Good use of graphic elements (photos, subheads, 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

Content

20 Things To Remember For Good Web Copy

1. Tight writing. That doesn’t mean bad or easy writing
2. Copy of about 600-800 words is better for SEO and catching the long tail of search.
3. Title � Subject �Support, in that order, like subject, verb, object.
4. Titles should be snappy and informative and clickable, but clear.
5. Leads (first sentence or paragraph) should get to the point. Tell the reader what the article’s about first thing.
6. No fancy, wordy intros where it’s not clear what you’re talking about.
7. Information beats fluff every time. Pretty is for books and newspapers (and only sometimes).
8. Information does not beat style every time. Style keeps people awake.
9. Sans serif fonts are easier and faster to read on computer screens.
10. White space is awesome � even better than big, pretty pictures.
11. Content should be scannable.
12. Think in bullets and subtitles.
13. People like lists.
14. Pictures should be specific and informative, not generic, decorative and ad-like.
15. Photos should be relevant to content.
16. People in pictures should look friendly and approachable (and have their whole head).
17. Photos should be full body if possible (so guys can check out packages and stuff).
18. Spell stuff right. It makes you look smarter.
19. Grammar IS important.
20. The text of press releases and other public news should be very tight.

Value

What gives value to hypermedia? Something is important because it matters to someone, because it either does or does not deliver things of value so can any hypermedia ever deliver value?

Injecting Value into Hypermedia

• Know your user
• Don’t get too personally involved in “your” project, become objective
• End users should evaluate your design

http://www.webpronews.com/topnews/2007/03/14/news-article-design-20-tips-for-good-web-copy

http://www.ratz.com/featuresgood.html

Direct Manipulation Limitations Direct manipulation regarding technology has several limitations. Physical constraints include inability to see text or movement on the monitor, inability to use an input device such as a mouse, and inability to hear error messages, etc. Semantic constraints include inability to understand the text and links on a web site. Be careful [...]

Navigation breadcrumbs are an important part of making your web site Human-Computer Interaction friendly. I have created a page in my Technology Goodies section of my web site that gives you the code I have been using for years. Feel free to use this breadcrumbs script on your web site. It has sure helped my [...]