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

  • flow chart
  • web
  • linear
  • 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