User-Centered Design and Web Development
By Raļssa Katz-Haas
Table of Contents
A summary of this article, Ten
Guidelines for User-Centered Web Design was originally printed in Usability Interface, Vol 5, No. 1,
What is User-Centered Design?
How to Develop User-Centered
Involve users from the
Know your users
Analyze user tasks and goals
Dont settle on a final direction too
Test for usabilityrepeatedly!
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
Usefulness relates to relevance; do the functions, information, etc., match what the
user actually needs?
Usability relates to ease-of-usea simple concept, but not always easy or
intuitive to implement.
|User-Centered Design cuts costs and
increases user satisfaction and productivity.
There are certain global usability principles, or guidelines. As they apply to web
development, many of these guidelines can be summarized as follows:
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.
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
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.
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, dont 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 dont really read
web pages. Users looking for their nugget of information are more like
hunters than like someone out for a leisurely stroll.
Web users often report feeling lost. There are several ways to help users
The user should be able to visualize the sites structure.
- Links should be descriptive enough so that users can easily predict what they will find
when they click a particular link.
There should be no dead-end pages from which users cant, or dont
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 dont 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.
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.
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 sites information
Text should be easy to read:
Sans serif fonts are usually easier to read online than serif fontsespecially in
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.
To foster clarity, use the following:
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.)
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 users satisfaction/motivation.
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
- How much experience do the users have with:
- 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:
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?
- What are the tasks users need to perform; how do they currently perform these tasks?
What is the workflow?
4. Dont 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 usabilityrepeatedly!
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.
6. Learn More
This document is only an introduction; a preliminary sketch. User-Centered
Design draws from many disciplines such as Cognitive Psychology, Anthropology,
Human-Computer Interaction, Visual and Graphic Arts, Communication, User-Interface Theory,
Linguistics, Human-Factors, Information Design, Instructional Design, Color Theory,
Typography, and more.
Read the research in these fields. Attend conferences and seminars. Consult with
specialists. Join professional organizations. Observe peoples behavior with
Hackos, Joann T. and Redish, Janice. User Interface Task Analysis.
John Wiley & Sons. 1998
Nielsen, Jacob. Usability Engineering. AP Professional. 1995
Rubin, Jeffrey. Handbook of Usability Testing. John Wiley & Sons,
Sano, Darrell. Designing Large-scale Web Sites: A Visual Design Methodology.
John Wiley and Sons. 1996
Scanlon, Spool, Snyder, and DeAngelo. Web Site Usability: A Designer's Guide.
User Interface Engineering. 1997
World Wide Web
Guide to Web Usability Resources, Usable Web: http://www.usableweb.com/
Human-Computer Interaction, IBM http://www.ibm.com/ibm/hci/
Top Ten Mistakes in Web Design, Jakob Nielson's Alertbox http://www.useit.com/alertbox/9605.html
Web Style Guide, Yale Center for Advanced Instructional Media http://info.med.yale.edu/caim/manual/contents.html