Web Page Design Principles

The Poetry of Information

In a recent study of fifteen large websites, users could only find information 42% of the time, and clicked away in frustration. Websites often fail because of confusing design that involves no user input. It is critical that websites be usable, or consumers will look elsewhere.

Key questions to consider when preparing a web site:

• What are the objectives of the website?
• What are the characteristics of the target audience - literacy level, generation/age, ethnicity/culture?
• What types of technical constraints does the user face - hardware, software, access, Web experience?
• Most importantly, is the content immediately represented on the front page?

As you begin your design, identify the structure of the website:

• Sequential: Each page links to the next, in a linear, sequential manner.
• Hierarchical: Pages are organized in outline format, with each page leading to several others, and each of those leading to several others.
• Non-linear: Each page may lead to any other page or pages, in no particular order except as content relates to other topics.
• Search and list: Users use a keyword search box or search form to specify search terms to retrieve the pages they're seeking.

Elements of a usable structure:

• Prioritize information:
  Are user's needs a priority? Position priority content and tools first.
• Provide multiple paths to information:
  Have users been given alternative ways to get to the information they need. Is there a search engine in addition to menu pages?
• Is the site as "flat" as possible:
  Are users led to information in as few mouse clicks as possible?
• Be consistent:
  Does the structure become self-explanatory through consistent layout and placement?

Building usable navigation:

• Provide global navigation on each page: Users may arrive in the middle of a site rather than at the home page. Are they told what else is available?
• Cross-referencing: Are links to other pages in the site with related content provided?
• Navigation tools: Is navigation easy to locate by grouped navigation elements in one or more areas on the page.
• Combine text navigation with graphics to create a universal language, while still being specific.
• Search: Extensive sites should augment their navigation with a search tool. The keyword search box or search form that users complete to perform a search must be clear and easy to use. Use of terminology that matches users' terminology, are simple instructions available and tools to help guide users through the search?

Site map:

FAQ pages:

Look and feel sets the tone and personality of a site.

• Minimize the number of colors used: Fewer colors means shorter download time.
• Are browser-safe colors used? (Only 216 colors will appear consistently on all platforms, PC and Mac and browsers.)
• Sensitivity to the meanings of colors in various cultures: In some cultures, for example, black or red may represent death.
• Are small and simple graphics used? Informational sites, use graphics only to enhance navigation or illustrate content.
• Consistency: Though pages may have to vary, the look and feel of the navigational elements should remain consistent.

Simplicity is key!

• Is basic HTML used as wells as rich media authoring tools?
• Is unnecessary technology used?
• Test your sites on various browsers. How does the appearance change? Does it remain consistent?
• Is download time minimized?
• Are graphic size and page size kept as small as practicable?

Usable page layouts:

• Is logo placed in a consistent location?
• Does the site's identity appear on every page?
• Are users aided in finding information on the page easily by providing sub-heads?
• Is the length of the page minimized? (Although newer usability studies show users are more willing to scroll than they used to be.)
• Legibility: is there high contrast between the text and the background?
• Have frames been avoided? Frames cause problems with bookmarking/favorites, browser history lists, and printing.
• Are links on image maps well defined?
• Is text left-align?
• English speakers are accustomed to reading top-down, left-to-right. Centering is fine for buttons, headlines or captions but not for text.

The goal of web design then becomes to tailor the message to the medium - and to balance design with task-based ends. Design should harmonize function and form towards the enhancement of both. As the Bauhaus school put it, the goal of design is to develop a functional (website) architecture integrating art, technology and use-value -without being self-referential in the design process.

User Testing!

Understand the reflex level of user interactivity and then designing a task-analysis blueprint. Predicting reactions, reflexes, and how users respond to and interact with various virtual environments and stimuli is key. This means anticipating visitors needs, prioritizing your messages and tasks, predicting what user questions will be asked (in what order), and quickly providing the answers in a navigable, 'scaffolded' format that keeps your visitor oriented and engaged.

Common synthesis in web design:

While design innovations may stimulate site visitors, the same techniques can also over-stimulate, as well as elicit impatience, indifference, or the dreaded immediate flight-impulse.
 
On the other hand, the purely functionalist goal of web design is to make the message advance as the medium recedes. Theoretically, this would mean killing any artistic or design impulse whatsoever. But would you want a website that looks ASCII?

General Site Design Variables:

• color
• illustrations
• column width
• typeface

• sequential positioning (chronology)
• position on page (layout)
• type size
• type weight
• line spacing

• areas of color and shading
• lines and boxes
• symbols, logos, illustrations
• text attributes (italic, etc.)

• http://usability.gov/guidelines/
• http://www.usableweb.com

Based on presentations to the SUNY Fredonia campus community
by Ricardo Miranda, Assistant Professor, Media Arts