|
Web Development: Design Issues
for a Better Web Site, by Steve Burks, 5/2003
|
Jakob
Neilson’s Ten Good Deeds in Web Design -
http://www.useit.com/alertbox/991003.html
|
Much of
this information comes directly from a presentation
offered by Trina Magi, Reference Librarian, UVM. And the
Web design column ALERTBOX,
by Jakob Nielsen. And Brian MacDonald, SMC Web
Developer |
|
|
A "good" Web designer should be accomplished
in three core skill areas:
- Computer Applications, Graphic Design, Content (writing) - YIKES!
|
|
| Three Standards we will
examine:
1. Organization: How do
you organize a Web site for navigability?
2. Graphic Design:
What design principles should be employed to maximize
readability?
.3.Content: What content
should be included to enhance the site?
|
|
| Organization
Words of Wisdom from Brian MacDonald, "Creating
a web site is like making your own forest, make sure you give
visitors a map and a compass. Always leave your visitors an
"out" – a way back home (some ruby slippers)."
According to Jakob
Nielsen : "For almost seven years, my
studies have shown the same user behavior: users
look straight at the content and ignore the
navigation areas when they scan a new page.
(Remember, users
almost always scan - they rarely read carefully
online.)
User studies typically find:
- when they arrive on a page, users ignore
navigation bars and other global design elements:
instead they look only at the content area of the
page
- users don't understand where they are in a Web
site's information architecture
- users are extremely goal-driven and look only
for the one thing they have in mind - they don't
spend much time on promotions for anything else
- in pursuit of their goal, users often rely on
search as their main hunting strategy-
|
Causes of Navigation Problems
- Disorientation
- Cognitive overhead (mental stress of keeping ones
bearings)
- Following tangents; not getting to information you need
- Lack of context
- Volume of information
Organization Standards & How to Apply Them
- Divide content into logical nodes:
Make a plan using
- Include 3-9 links on home page
- Use menu bar for links - buttons, toolbars,
side/top/bottom
- Limit home page to two screens
- Clearly identify home page as such
- Include header with organization name on each page
- Link home page to parent organization
- Match link names to page headings
- Provide navigational links on each page
- Links to outside sites: consider opening a new browser
window
- Information should be no more than 3 clicks away (if
possible) from start page
|
|
| Graphic
Design
Words of Wisdom from Brian MacDonald, "More
is not better. Keep your page and link colors constant so that
people know they're still 'in your space'.
"
|
According to Jakob
Nielsen : "People rarely read Web pages
word by word; instead, they scan the page,
picking out individual words and sentences. In a
recent study John Morkes and I found that 79 percent
of our test users always scanned any new page they
came across; only 16 percent read
word-by-word."
As a result, Web pages have to employ scannable
text, using
- highlighted keywords
(hypertext links serve as one form of highlighting;
typeface variations and color are others)
- meaningful sub-headings (not
"clever" ones)
- bulleted lists
- one idea per paragraph (users
will skip over any additional ideas if they are not
caught by the first few words in the paragraph)
- the inverted pyramid style, starting with the
conclusion.
- half the word count (or less)
than conventional writing
|
Good Graphic Design should ...
- Increase readability and level of visual comfort
- Compensate for poor online resolution when compared to
print
- Graphic Design Expertise - (tends to be subjective)
Graphic Design Standards
- Use consistent layout and color, including your
background,
links & images (rule of 3)
- Use images sparingly (loading time and distractions)
gif
vs. jpeg
animated gifs (27591 bytes) vs. non
animated (3931 bytes)
- Provide adequate white (black) space
- Maintain high contrast
- Avoid using too many typefaces - font priority/hierarchy
- Avoid text that is too small or too large
- Set type in upper and lower case letters
- Use bold and italic type sparingly
- Use narrow columns (don't use the whole page, it is hard
to read)
- Don't underline text (it will be interpreted as a live
link)
|
|
| Content
Words of Wisdom from Brian MacDonald, "Content
remains king, but don't just migrate text pages to the web
(unless you're posting a report for others to download). Break
information into bullets where possible. Make it easy to digest
by providing smaller bites."
According to Jakob
Nielsen : "Web users generally prefer
writing that is concise, easy to scan, and objective
(rather than promotional) in style, research has
shown. A common thread between conciseness,
scannability, and objectivity is that each reduces
the user's cognitive load, which results in faster,
more efficient processing of information. (Concise
text contains less information to process; scannable
text calls attention to key information; and
questioning the credibility of promotional
statements seems to distract users from processing
the meaning, our earlier studies showed.) Thus, our
aim was to rework existing Web pages so that they
would minimize cognitive load and enhance speed and
efficiency."
- users comment on the content first; if the
content is not relevant, then they don't care
about any other aspect of the design
|
Good Content should ...
- Enhance credibility and authority of Web site
- Make Web site more useful
- Assist in Navigation
Content Standards
- Give directory information on home page (organization
name, postal and email addresses, telephone, fax)
- Include organization name on all pages
- Include date of last update
- Include statement of purpose on home page
- Use meaningful titles for pages
- Write concise copy
- Avoid acronyms and jargon
- Make copy error-free (use spell checker)
- Link users to root level of content
- Use clear language to identify links
- Annotate links
- Include clickable email address
|
|
|
Worst
of the Web
http://www.webpagesthatsuck.com/
|
|
|
The
Web Development Guidelines & Style Guides
|
http://info.med.yale.edu/caim/manual/contents.html
|
|
|
|
|