USER INTERFACE GUIDELINES FOR WEB PUBLISHING

© 1997 by Walter Maner (unless otherwise noted)
May be reproduced only for non-commercial educational purposes.

The outline below requires Netscape/Microsoft browsers, version 3.x or later, for correct viewing.

Based largely on Stephen Wilson,
WORLDWIDE WEB DESIGN GUIDE
(c) 1995 by Hayden Books
  1. Back Top Next
    ORGANIZING INFORMATION AND NAVIGATION
    1. CLARIFYING THE INFORMATION STRUCTURE
      1. Become an expert on your topic. Web design means information
        design.
      2. With categories and relationships in mind, work to clarify the
        logical structure of your site.
      3. Provide a table of contents and/or orientation page.
      4. Consider using a set of orientation graphics in your
        introduction page.
      5. Consider using an small imagemap as your main orientation
        device.
      6. Consider offering a search utility if your site is complex or
        multilayered.
      7. Consider offering customization options for different classes
        of visitors (e.g., frames or no frames, graphics or no
        graphics, English or some other language).
    2. NAVIGATION AIDS
      1. Consider creating a distinctive "signature" graphic (or logo)
        to use at the top of very page. This way, users will know when
        they are within the boundaries of your web site and when they
        have left it.
      2. Offer an assortment of navigation links on every page.
      3. Consider using icons as navigation aids.
      4. Provide identification information on each page.
      5. Orient users who arrive directly from external links. Maybe
        they missed your welcome page.
      6. Identify your page to cover cases where it has been saved to
        disk or printed.
      7. Construct anchors for links using meaningful words or icons
        rather than "click here."
      8. Modularize your web content into sections to minimize the need
        for scrolling.
    3. MANAGING EXTERNAL LINKS
      1. Re-validate your links on a regular schedule. New software
        makes this easy.
      2. Provide brief annotations of the content to be found by
        following an external link.
      3. Organize sets of links into categories, then use inline
        graphics and section "signatures" to emphasize the categorical
        divisions.
      4. Include only relevant links but be expansive in your definition
        of relevance.
      5. In some cases, you may want to consider confirming that a
        visitor really wants to leave your site before dispatching them
        to an external link.
    4. USABILITY TESTING
      1. Test your pages with third parties, especially inexperienced
        users.
      2. Test your pages with various browsers.
      3. Test your pages with various monitors.
  2. Back Top Next
    VISUAL APPEARANCE AND EFFECTIVENESS
    1. GENERAL DESIGN GUIDELINES
      1. Create a coherent, consistent layout style. These styles
        become "signatures".
      2. Strive for an overall "look."
      3. On web pages, blank space is free; use it to set up text and
        images. Print media, by contrast, are densely packed mainly
        because, in their case, blank space has an economic cost.
      4. Use emphasis techniques (e.g., blinking text) very sparingly if
        at all.
    2. ADDRESSING HTML AND WEB FEATURES
      1. Use appropriate headers and HTML widgets.
      2. Use the whole width of the page. Avoid the heavy-left
        syndrome.
      3. Size web pages to fit within a width smaller than the default
        470 pixel window opened by most browsers.
      4. Use transparent inline images unless there is a reason to have
        a bounding box.
      5. If nearly all visitors will be using the same browser (as could
        happen on corporate intranets), consider using the specific
        proprietary enhancements afforded by that browser.
      6. Test your pages on various browsers including text-only
        browsers link lynx.
      7. Don't use styles (e.g., underline) that conflict with browser
        conventions.
  3. Back Top Next
    TECHNOLOGICAL REALITIES
    1. RESPONDING TO VISITORS WITHOUT GRAPHICS
      1. Provide alternative indexes and navigational aids.
      2. Provide explanatory text for images, sounds and video.
      3. Consider offering alternative pages optimized for text-based
        browsers.
    2. RESPONDING TO VISITORS WITH LOW BANDWIDTH CONNECTIONS
      1. Minimize the size of inline images.
      2. Use interleaved GIFs. If progressive JPEGs gain wide
        acceptance, consider using them too.
      3. Always specify the size for images. This speeds loading.
      4. Resist the temptation to make your home page graphic a huge
        inline image.
      5. Reuse images so browsers can reload from local cache.
      6. Minimize the size of sound files by using the lowest acceptable
        sampling rate.
      7. Minimize the size of video files by using the lowest acceptable
        frame size and rate.
      8. Warn users about the size of linked media before they activate
        the link.
      9. Offer thumbnails, previews, excerpts and snippets. Link these
        to their larger counterparts.
    3. BEING AWARE OF MEDIA LIMITATIONS
      1. Accommodate 13-inch screens, which are only 640 pixels wide.
        Figure that the browser will open a window even smaller,
        typically only 470 pixels wide.
      2. Whenever possible, reduce the pixel depth of color images to 8
        bits.
      3. Create sounds that work acceptably with low-end sound cards.
      4. Create video that works acceptably at slower frame rates.