Guidelines for User-Centered Web Design

29 November, 2008 | Hieu Trung | No Comment

What is User-Centered Design?

User Centered-Design (UCD) is a philosophy and a process. It is a philosophy that places the person (as opposed to the ‘thing’) at the center; it is a process that focuses on cognitive factors (such as perception, memory, learning, problem-solving, etc.) as they come into play during peoples’ interactions with things.

UCD seeks to answer questions about users and their tasks and goals, then use the findings to drive development and design.

UCD seeks to answer questions such as:

* Who are the users of this ‘thing’?
* What are the users’ tasks and goals?
* What are the users’ experience levels with this thing, and things like it?
* What functions do the users need from this thing?
* What information might the users need, and in what form do they need it?
* How do users think this ‘thing’ should work?
* How can the design of this ‘thing’ facilitate users’ cognitive processes?

UCD can improve the usability and usefulness of everything from “everyday things” (D. Norman) to software to information systems to processes. . . anything with which people interact. As such, User-Centered Design concerns itself with both usefulness and usability.

1. Usefulness

Usefulness relates to relevance; do the functions, information, etc., match what the user actually needs?

2. Usability

Usability relates to ease-of-use—a simple concept, but not always easy or intuitive to implement.

User-Centered Design cuts costs and increases user satisfaction and productivity.

3. Usability Guidelines

There are certain global usability principles, or guidelines. As they apply to web development, many of these guidelines can be summarized as follows:

Visibility

Visibility helps users form correct mental models of the ‘thing’—models that help users predict the effect(s) of their actions. Important elements (such as those that aid navigation) should be highly visible. Users should be able to tell at a glance what they can and cannot do.

Memory Load

The site should reduce user memory load. Screen elements should be meaningful and consistent across the site so users can recognize, instead of remember, what elements mean from one page to another. New items and functions should relate to ones the user already knows.

Feedback

When a user performs an action, she should receive immediate feedback. For example, when the user clicks a button, something on the screen should change so the user knows the system has registered her action.

Accessibility

Users need to find information quickly and easily:

* Offer users a few ways to find information (such navigational elements, search functions, site map, etc). However, don’t offer too many options at once as this confuses many users.

* ‘Chunk’ information into small, digestible pieces and organize them into some type of schema or hierarchy that is meaningful to the user.

* Enable skimming; provide clues that allow users to find their ‘nugget’ of information’ by scanning rather than reading.

Most users don’t really read web pages. Users looking for their ‘nugget’ of information are more like hunters than like someone out for a leisurely stroll.

Orientation/Navigation

Web users often report feeling lost. There are several ways to help users orient themselves:

* Links should be descriptive enough so that users can easily predict what they will find when they click a particular link.

* The user should be able to visualize the site’s structure.

* There should be no ‘dead-end’ pages from which users can’t, or don’t know how, to exit.

* Every page should have clearly visible elements telling users what page they are on, where they are in relation to other pages, and how to get to other pages. (Users enter sites from many places; they don’t always enter a site via the home page.)

* Use frames sparingly, if at all. With frames, the back button, printing, and bookmarking functions do not work like they do on non-frames pages, confusing many users. Close to 60% of web users employ the back button as their primary means of navigation, so it is no small usability problem when it doesn’t work the way they expect.

Errors

An error is an incorrect action by the user such as clicking the wrong link. It is important to minimize user errors and provide users with mechanisms that allow them to recover quickly from errors.

Satisfaction

The site should be pleasant to use and look at. Users’ perception of ‘pleasantness’ influences their:

* Perception of ease-of-use
* Motivation for learning how to use the site
* Confidence in the reliability of the site’s information

Legibility

Text should be easy to read:

* Sans serif fonts are usually easier to read online than serif fonts—especially in body text.
* Ornamental fonts are hard to read.
* Italics are hard to read online.
* Body text that is too large or too small is hard to read. (9-11 pt sans serif and 11-12 pt serif seems to work well. However, it is difficult to make a hard and fast rule since individual typefaces can appear larger or smaller than their point size would indicate.)
* Text in all capital letters is hard to read.
* Blocks of text longer than 50+ characters significantly slow reading.
* High contrast between text and background increases legibility. Dark text against a light background is most legible.

4. Language

To foster clarity, use the following:

* Short sentences
* ‘Everyday’ words (instead of jargon or technical terms)
* Active voice, active verbs
* Verbs (instead of noun strings or nominalizations)
* Simple sentence structure

By its very nature, the Web crosses cultural and national boundaries. For this reason, it is best to be careful with ambiguity in the form of:

* Humor (Humor does not translate well across cultures: at best, it is not understood, at worst, it can offend.)
* Metaphors
* Icons
* Idioms
* Puns

5. Visual Design

Visual design should be the user’s ally. To this end,

* Use grids for preliminary page layout
* Create pages that are interesting, yet simple and uncluttered.
* Use graphics to:

- Illustrate/inform (not decorate).
- Increase the user’s satisfaction/motivation.
- Aid navigation.

* Use graphics that are small (in file size) so they download quickly.
* Make the most important elements the most visually prominent.
* Treat text as a graphic element.
* Use color conservatively. Color can engage users, both emotionally and cognitively, but misapplication of color creates negative outcomes. (Try your design in monochrome first, then, one at a time, add a few colors.)
* Group like elements together.
* Use ‘white space’ to visually organize the page, to make important elements stand out, and to give users’ eyes some resting space.

How to Develop User-Centered Web Sites

1. Involve users from the beginning

Guidelines can provide general information about users and user/web interaction. However, that is not enough to make a particular site usable; it is critical to discover how your particular users interact with this particular site.

Involve users from the beginning by:

* Discovering their mental models and expectations
* Including them as an integral part of the design/development process and team
* Observing them at their workplace; validating your assumptions about them; analyzing their tasks, workflow, and goals
* Eliciting feedback via walk-throughs, card sorting, paper prototypes, think-aloud sessions, and other methods

2. Know your users

Ask questions such as the following and use the answers to guide development and design decisions:

* How much experience do the users have with:

- Computers?
- The Web?
- Domain (subject matter)?

* What are the users’ working/web-surfing environments?
* What hardware, software, and browsers do the users have?
* What are the users’ preferred learning styles?
* What language(s) do the users speak? How fluent are they?
* What cultural issues might there be?
* How much training (if any) will the users receive?
* What relevant knowledge/skills do the users already posses?
* What do the users need and expect from this web site?

3. Analyze user tasks and goals

Observe and interact with users (preferably at their workspace) as you attempt to answer questions such as:

* What are the tasks users need to perform; how do they currently perform these tasks? What is the workflow?
* Why do the users currently perform their tasks the way they do?
* What are the users’ information needs?
* How do users discover and correct errors?
* What are the users’ ultimate goals?

4. Don’t settle on a final direction too soon

Explore different designs and approaches and get user feedback before making final direction, development, and design decisions.

5. Test for usability—repeatedly!

Usability testing is an iterative process; it is important to conduct usability testing throughout the development cycle.

Usability testing can be conducted using elaborate labs and equipment or using relatively simple and inexpensive means. But usability testing is the only way you can know if this particular site meets these users’ needs.

Source: stcsig.org

Leave a Reply

We love to hear your views.