A Shaker Approach to Web Site Design
"That is best which works best"
"Beauty rests on utility"
"Simplicity is the embodiment of purity
and unity"
- Shaker Maxims
Michael D. Levi
The Shakers
Who are the Shakers, and what do they have to do with the
World Wide Web?
In brief, the Shakers were a religious denomination who split
off from the English Quakers and immigrated to the New World
shortly before the American revolution. The Shakers, or United
Society of Believers in Christ's Second Appearing, reached a peak
of approximately 6000 members in 18 communities by the
mid-nineteenth century, and began to decline after the Civil War.
Today only a few remain.
The Shakers believed in communal property, pacifism, equality
of the sexes, celibacy, open confession of sins, and consecrated
labor. They lived in largely self-sufficient communities separate
from the "world's people." Unlike some other religious
denominations, Shakers were not averse to technology. On the
contrary, Shaker communities were early adopters of machinery and
techniques that would facilitate their work.
The Shakers are probably best remembered for their furniture,
their architecture, and other crafts. All are characterized by an
extraordinary level of skill and beauty.
It is the contention of this paper that the three key
attributes of Shaker artifacts:
- Simplicity
- Elegance
- Quality
along with the overriding Shaker emphasis on utility, can
serve as the guiding principles for designing and developing
World Wide Web sites.
A Shaker chair is useful. It is well suited for sitting. Its
clean, smooth lines have no excess adornment; the beauty of the
wood is adornment enough. So should Web sites be structured for
maximum utility, allowing the value of their content to attract
and hold user interest.
Measuring Web Success
It is fairly easy to determine whether a chair is
'successful' or not. From a vendor's point of
view, if the chair is purchased and not returned it is a success.
If the sale of a chair leads to repeat business, it is even more
successful.
From a purchaser's point of view a chair is successful if
it is comfortable, does not break when sat upon, has the desired
physical dimensions, and fits the aesthetics of the room in which
it is located. Depending on the circumstances, other criteria may
also be important. Lawn chairs must withstand precipitation and
temperature change. Nursery furniture should not poison infants.
Shaker chairs were (and continue to be) successful primarily
because they meet the above criteria. Above all else, Shaker
chairs are useful. They are designed to seat humans; all other
functionality is of secondary consideration.
Determining whether a Web site is successful is less
straightforward. The most common metric used is synonymous with
popularity: a successful site has a lot of "hits".
This is insufficient. To start with, "hit" is a very
poorly defined term. Depending on the site and the tool set used,
a reported hit count may or may not include graphic elements such
as pictures, icons, and buttons, as well as internal technical
details of the Web software such as 'image maps.' So at
the very best a hit count can only legitimately be used to
measure changes in popularity over time, but not as a comparative
cross-site measure.
Another flaw in using hit counts as a basic metric is its
leveling effect. A hit count does not distinguish between a
content-rich page, a list of internal or external links, or an
'under construction' page. A hit is a hit, regardless
of substance.
Worst of all, a hit count often rewards exactly the wrong
thing. A site that has been redesigned to streamline user access
to the most frequently retrieved material may well show a
reduction in hits precisely because its utility has been
enhanced.
There are certainly quantitative metrics that can be used:
number of sessions, number of users, and number of repeat users
are all valuable statistics to gather and analyze. But
qualitative measures are equally important. The best measure of
success is how well a site facilitates users and sponsors in
accomplishing their goals. In short, the value of a site can be
assessed by measuring its utility and quality.
In order to determine whether a site's goals have been
met, it is useful to begin by introducing a rough taxonomy of
site types and Web users.
Site Types
With the explosion of the Web over the past three years, Web
sites have sprung up for almost every imaginable purpose. Despite
this diversity, when analyzed from the standpoint of
interactivity there are only three basic types of Web site:
- Ego, or Vanity sites;
- Resource, or Information sites;
- Transaction or Two-way sites.
A personal home page is the embodiment of an ego site. Its
purpose is to say "I'm here. I'm cool. Look at me!" Ego
sites may serve as a communications channel for a very small
audience (directions to a wedding, for example), or as an
advertisement (putting one's resume online) but their primary
reason for being is personal gratification for the creator. For
an ego site, ongoing interactivity is secondary to the original
act of creation.
The success of an ego site can be assessed quite simply: is
the creator satisfied or not? No further evaluation is required.
Resource sites attempt to provide information or some other
data resource to their readers. This is primarily one-way
communication, with the site developer providing information
he/she wants to share in some way and site visitors consuming
this resource. Most government sites, and most statistical sites,
follow this model. Many corporate sites are primarily resource
oriented, providing company profiles, product descriptions, and
other marketing documents. The resources need not be serious,
however. Most entertainment-oriented sites, such as online
magazines, lists of jokes, concert schedules, etc. can be
categorized as resource sites.
The success of a resource site should be assessed by asking
whether most users found the information they were looking for
(or discovered that the desired information was —
legitimately - not present on the site), how quickly they
found it, how many wrong turns they made along the way, and how
satisfied they were with the quality of the interaction.
Transaction sites, by contrast, involve two-way communication.
Both the site owner and the user have something to contribute to
the interaction. Commercial sites, such as online bookstores or
stock brokerages, are typically transactional in nature (the site
owner provides a list of products; the user assembles a list of
desired goods, then adds a shipping address and a credit card
number; finally the site owner physically sends a product).
Non-commercial transaction sites would include online surveys.
The success of a transaction site can be measured with the
same tools as a resource site, adding a measure of how many
successful transactions were completed.
The remainder of this paper will focus primarily on resource
sites. All site types, however, can benefit by emulating Shaker
craftsmen and women and concentrating on the essentials of the
task at hand.
Web Users
Like site types, users of the Web can be broken into three
categories:
- Non-discretionary;
- Discretionary, directed;
- Discretionary, casual.
Non-discretionary users include those who, for whatever
reason, are required to access a particular Web site. This might
be an organizational intranet which holds the only copy of a
current telephone directory. Non-discretionary users do not have
the freedom not to use a particular Web site.
Discretionary, directed users are those who are not required
to use a particular Web site, but who are strongly motivated to
do so. This may be because they believe other channels for
obtaining the necessary information are too cumbersome,
expensive, or slow. A discretionary, directed user will try very
hard to make sense out of a Web site, and to obtain what he/she
is looking for, but will leave if the experience proves too
frustrating or the desired information does not appear to be
present.
Discretionary, casual users are the stereotype
"surfers". Such users may stumble upon a given site,
and may be willing to spend a little time investigating, but are
not particularly motivated to stay and are likely to leave as
soon as they get frustrated or bored.
Different audiences require different approaches to design and
implementation. In general, non-discretionary and discretionary,
directed users are likely to focus immediately on how well a site
supports their particular task, while casual users may be more
'seducible' by superficial attractions. Ultimately,
however, even a surfer requires meaningful and well-organized
content to remain at a site or return to it.
Naturally there are many other user and usage characteristics
that are relevant to the Web site designer: familiarity with the
topic, familiarity with the technology, frequency and duration of
sessions, etc.
Site Perspectives
The single most important predictor of site utility is the
perspective from which the site has been designed. Just as there
are two participants in any interaction between a user and a Web
site (the user and the site designer), so there are two
perspectives around which the site can be designed.
The first is provider-centered. This is a site where the
designer cataloged everything his/her organization had to offer,
then built a site around the material thus assembled. Provider
centered sites often are structured to follow a corporate
organization chart. Provider-centered home pages frequently
feature a list of links that begins with "Welcome to Our
Site", perhaps a picture of the company president or agency
head, "About the Organization", perhaps an organization
chart, annual report, etc. Most of this information may seem
extremely important to employees of the organization, but is
seldom of interest to outsiders who are looking for concrete
information.
A site that organizes information about product recalls by the
date of the press release in which the recall was announced is
provider-centered. It is easy to imagine that internal to the
company such documents are stored and referenced chronologically.
A user of the site, however, is likely to be looking for a
particular product, and will probably not know when the recall
was announced.
By the same token, any site that has an 'under
construction' page is showing signs of provider centricity.
The real meaning of 'under construction' is the site
developer saying to the user "I know there is something
missing here. Its just not ready yet. Don't bug me about
it." Meanwhile the user's expectations have been
raised, he/she has been tricked into an extra click, and has paid
a penalty in unnecessary wait time and possible confusion.
'Under construction' pages are invariably frustrating
for the user; they serve only to bolster the self-esteem of the
developer.
Provider-centered sites, regardless of the intent of the
creator, end up being ego sites more often than not.
User-centered sites, by contrast, are usually structured to
follow specific tasks. Here the designer has attempted to
determine what users are likely to wish to accomplish when
visiting the site, and has structured the site around those
anticipated demands. Whereas corporate information like
organization charts, mission statements, or annual reports may
still be present on the site — after all, some users are
likely to be interested — it will be low on the list, not
the first thing a user will see. Instead, items of interest to
the user will be displayed most prominently. The site as a whole
will be structured so that information of interest to the largest
number of users is the easiest to reach, while less popular pages
might take a few more clicks.
Building a user-centered site requires a very good
understanding of the user population. This understanding can come
from past interactions with a customer base, from studies of
projected user behavior and demands, or from analysis of what
users are actually doing on an existing Web site.
Developer intuition concerning user needs and desires is
typically not very good. People steeped in either a technology or
an organizational culture are frequently not able to leave their
knowledge behind and project the experience of either a less
knowledgeable individual or an individual with a markedly
different perspective. Some sort of objective user study is
usually required.
Shakers were both farmers and designers of barns; they
understood the task and the technologies very well. Since Web
developers can not always be experts in everything required to
design appropriate sites (the task domain, the technology, and
the techniques of user-centered design) they can draw on outside
resources such as guidelines documents and work with usability
professionals.
Many designers are thrown by the potential diversity of users.
"How can I possibly design a site for a particular user
population when literally anyone in the world could stumble
across my site?" It is certainly true that the Web user
population is huge. But some initial development decisions must
be made, without which no trade-offs can ever be approached
systematically. This can be as simple as assuming understanding
of the English language, or as demanding as requiring facility
with college level statistics and a sophisticated understanding
of survey methodology. Different portions of a site can be
optimized for distinct user populations (several sites currently
suggest different paths depending on whether the user is a high
school student, a teacher, a researcher, or a legislative aide),
but no site can be built for "everyone."
A user-centered site will usually require several iterations
to get right, and can be expected to evolve along with the user
population.
Components of Web Site Design
There are two main components of Web site design: page design
and dialog design.
Page design comprises all the elements that can been seen in
one piece through a browser: text and pictures along with
headers, footers, icons, banners, buttons, and links arranged in
different typefaces and fonts, columns, tables, etc. The
objective of good page design is to position elements in such a
way that important information is easily recognized, less
important information can be located with only a little effort,
and unimportant information has been eliminated. Information, in
this context, may include text, graphics, menu items and
navigation buttons, or site identifiers.
Web page design corresponds to screen or window design in
traditional interactive systems, or page layout in paper-based
graphic design. A great deal of research has been done in this
area, much of which can be transferred to the Web with only
slight modification.
Dialog design has to do with the back-and-forth between a user
and a Web site. Typically the user enters a site (through a link,
a bookmark, or by typing a URL) and is presented with a page. The
user spends some time looking at the page, then clicks on a link
or a browser button. The system responds by presenting a new
page. The user looks at that, then clicks somewhere, and so
forth. There is an interaction between the user and the Web site.
With any luck, the Web site is responding to the user's actions
in a meaningful and predictable way, and the user, in turn, is
reacting to the Web site. This can be seen as a conversation
between user and Web site, or between user and site designer.
The objective of good dialog design is to facilitate the user
finding the page he/she is looking for (i.e. the page or pages on
which the desired information resides) in the most effective way
possible. The quality and efficacy of a particular dialog design
can only be assessed in the context of its use: specific users
performing specific tasks.
Nobody's job description reads "use the computer".
Instead, workers are made responsible for specific tasks, and
(one hopes) given the necessary tools to accomplish those tasks.
The computer is such a tool; the Web site becomes such a tool.
Thus effective dialog design is directed towards facilitating
task completion in an accurate, comprehensive, and rapid manner.
The Software Development Life Cycle
Successful Web sites rarely happen by accident. A careful
development process will increase the chances of a useful site.
In the past an illusion of ease ("just HTML'ize these
documents and put them up on the server") coupled with
unrealistic deadlines resulted in a plethora of chaotic sites,
sites with little or no advance planning, little or no stylistic
coordination, and no process in place for controlled updates,
corrections, or expansions to the site once it had been released.
The traditional software development life cycle (SDLC) can
serve as a model for a proper development process:
- Analysis
- Testing
- Design
- Testing
- Implementation
- Testing
- Iterate until correct
Analysis is the phase during which the analyst determines what
needs to be accomplished. In a Web context this means identifying
the target user population(s); determining what these users want
or need from the proposed Web site; and determining what
organizational goals are to be met thro
Design is the life cycle phase during which the designer
determines how the required functionality will be provided. In a
Web context this includes identifying the content to be placed
online, determining the site structure, and developing a uniform
style guide.
Implementation is where the site is actually built. Existing
documents are converted to HTML. New documents and graphics are
created, as are forms, CGI scripts, and applets. Links are
inserted. The Web server is brought up and pointed to a home
page.
Testing is an ongoing activity, particularly important towards
the end of each life cycle phase. The earlier an error or
misunderstanding can be identified, the cheaper it will be to
correct. It must be recognized, however, that later phases tend
to uncover insufficiencies in earlier phases. Thus design may
well highlight missing functionality, and implementation will
surely point out gaps in the design. So developers should be
willing to revisit each life cycle stage more than once.
Development can be viewed less as a waterfall, where each phase
leads clearly to the next, and more as a spiral, with each phase
revisited as often as necessary.
All of the above phases have a traditional functionality
component and a usability component. The two are not fully
independent, but neither are they the same thing. Insofar as
careful methodologies have been applied to Web development in the
past, most of it has been directed towards functionality: is the
HTML correct, do the links point to the correct pages, is the
appropriate content present, are the scripts and applets fully
debugged. This is critical to a fully functioning, successful
site. Equally important are other questions: Does this make sense
to our expected user population? Can new users figure out where
to go? Can experienced users take advantage of shortcuts? Does
the site assist the users in accomplishing their underlying
goals? Usability analysis, usability design, and usability
testing run parallel to their functional counterparts.
The SDLC is not unique; some general equivalent exists in most
professional fields. Publishing, for example: common advice to
authors would include "identify the audience before
beginning to write", "clarify in your own mind what you
wanted to say", "begin with an outline, then flesh out
the outline, then have others read and critique the work."
Shaker Principles Tailored to Web Systems
The preceding sections have focused primarily on utility and
quality — how these can be determined and how they can be
produced. It is time to return to the other two Shaker
principles, simplicity and elegance.
Webster's gives one definition of simplicity as
"absence of affectation or pretense", and elegance as
"grace and restraint of style." In the Web context,
these characteristics define a design philosophy which
concentrates on supporting, enhancing, and emphasizing the
underlying content by careful arrangement and use of graphical
elements, but never allows the design itself to become prominent.
If the user becomes aware of the design beyond an almost
subliminal sense of aesthetic satisfaction, the effort has
failed.
In an earlier paper [1] Levi and Conrad took a set of
general-purpose usability principles originally proposed by Jakob
Nielsen and modified them to apply specifically to Web sites. Of
the nine principles thus derived, five are relevant to this paper
because they deal with simplicity and elegance:
Design aesthetic and minimalist systems. Create
visually pleasing displays. Eliminate information which is
irrelevant or distracting.
Simple does not mean ugly or boring. Shaker crafts are quite
beautiful. Web sites can be engaging and visually pleasing
without succumbing to excess. The key point is that no amount of
graphic or other technical virtuosity can make up for
insufficient, inaccurate, or poorly organized content. On the
contrary, baroque or otherwise unnecessary stylistic
embellishment (see below for examples) frequently hides or draws
attention away from the substance of a site.
Be Consistent. Indicate similar concepts through
identical terminology and graphics. Adhere to uniform conventions
for layout, formatting, typefaces, labeling, etc.
The importance of consistency can not be overemphasized. Not
only will use of uniform vocabulary and graphic layout add to
site aesthetics, but it will enhance utility as well. In a 1996
study [2] Mahajan and Shneiderman report up to 30 percent
degradation in speed of task completion when synonyms such as
question/inquiry, search/browse, or counselor/advisor were used
on different screens of an application. According to this study,
such inconsistencies in wording decrease user's performance
regardless of the user's level of expertise.
Speak the users' language. Use words, phrases, and
concepts familiar to the user. Present information in a natural
and logical order. Avoid jargon wherever possible. Use acronyms
cautiously, usually spelling out the complete phrase upon first
use (note that in a hypertext system the designer can not assume
that the reader has already traversed any given page, so such
clarification might be required every time an acronym is used).
A site designed explicitly for users highly familiar with a
given task domain will probably employ a specialized vocabulary;
a site designed for a general audience must use a more accessible
vocabulary.
Build flexible and efficient systems. Accommodate a
range of user sophistication and diverse user goals. Lay out
screens so that frequently accessed information is easily found.
Provide instructions where useful.
The goal is to build a Web site that is clear enough for a
novice or intermittent user to navigate with relative ease, yet
is powerful enough or contains sufficient shortcuts so that an
experienced user is not slowed down unnecessarily.
Simple does not mean simplistic. Web sites can and should
contain a wealth and richness of material. A well-structured
page, for example, can support scores of links without being
confusing or overwhelming.
Don't lie to the user. Eliminate erroneous or
misleading links. Do not refer to missing information.
Some Things to Avoid
As a general rule, anything that detracts from ease of use,
including legibility, comprehension, ability to focus, etc.,
should be eliminated. New techniques, such as extensions to HTML
or programming languages such as Java or ActiveX, can usually be
used either to facilitate users' tasks or to complicate
them. Web developers should be aware that technology for
technology's sake (cool for cool's sake) is unlikely to
help the users.
Backgrounds. Since at this time most computer screens
are rather grainy, the pixels in background graphics tend to
interfere with foreground text, making it difficult to read.
Virtually all patterned or textured backgrounds fall into this
category. Since there is already a performance penalty in reading
off a screen rather than reading from reasonable-quality paper,
such further degradation just adds insult to injury.
Equally problematic are poor choices of background and
foreground color. Pastel on pastel, or bright contrasting colors,
may provide a striking and memorable display, but will not make
reading any easier.
Scrolling text, blinking text, animated graphics. These
can all be lumped together as "gratuitous moving
stuff". Movement anywhere in one's field of vision is
very seductive and distracting; this draws the user's
attention away from content and degrades performance and possibly
comprehension.
Some concepts can be very effectively illustrated through
animation; one of the great strengths of a computer screen as
opposed to a printed sheet of paper lies in the ability to
dynamically change what is displayed on a CRT. Designer should
use such capabilities wherever they enhance or explicate the
subject matter. But waving flags, grinning monsters, or
slithering marquees are unlikely to add much value.
Frames. Frames are an attempt to solve a real problem:
how to present multiple views of an information space or task
domain. Unfortunately they are a failed attempt. Frames break the
common metaphors of the Web (one page at a time), and don't work
well with many browsers (the back button behaves erratically,
bookmarks and printing may not work as expected). What's
more, they don't even do a very good job at the problem they
were intended to solve. Coordinating multiple frames so that an
action in one frame updates multiple other frames is difficult if
not impossible; certainly few if any sites have implemented such
functionality correctly.
PDF files. Adobe's Portable Document Format (PDF)
is perhaps the best way to support perfect facsimile printing,
but what works well on paper does not necessarily work well on a
computer monitor. PDF files typically do not render well on
screen (the typeface is often fuzzy). Layout options such as
multiple columns depend on having an entire page visible at once;
this is typically not the case on a screen, so the user ends up
paging down one column, then returning to the top and paging down
again, and then perhaps yet a third time. Such scrolling is time
consuming, error-prone, distracting, and a waste of precious
screen real estate. Finally, having a PDF reader as a browser
add-in makes the user's work environment that much more
complicated by adding another set of buttons and commands that
may work subtly different from the buttons and commands which are
part of the standard browser.
If the designer's intent is to provide material to be
printed, PDF is a very good choice of formats. If the intent is
for users to view documents on screen, provide HTML. If users can
be expected to do both, provide both formats.
Conclusion
The World Wide Web is an interactive information dissemination
mechanism unprecedented in scale and accessibility. Never before
has it been so easy to provide computer-supported data, news,
knowledge, analysis, opinions, and advertising to so many people
around the globe. And never before has it been possible for a
computer to confuse, frustrate, and annoy so many people in such
a short time.
Given the vastness of the information space represented by the
Web, only the best sites can be expected to thrive. Slick
technology tricks are fascinating the first time, but become
boring after the second or third iteration. Fancy design
curlicues become stale equally quickly.
If a site is to endure, it is the value of its content that
will make the difference. For the value of content to be
apparent, the site must be designed to sustain and enhance that
content. Shaker handicraft, and the philosophy that gave rise to
it, provides the model to do just that.
In a paper on Shaker architecture, Robert P. Emlen wrote:
"Nineteenth-century visitors wrote of the unity of design
in Shaker villages. Developed according to the community's
standards and requirements, the buildings in a Shaker village are
more consistent in appearance than those of the neighboring
farms. Their clustering on the land, the way they relate to one
another in function and scale, the consistency of aesthetic
choices employed by Shaker craftsmen, all attest to that communal
society of spiritual brethren and sisters devoted to creating an
ideal life on earth." [3]
If a few words in the above quote were changed, it could
describe a well-crafted Web site. Anyone should be very proud to
have created such a Web site.
[1] A Heuristic Evaluation of a World Wide Web Prototype,
Michael D. Levi and Frederick G. Conrad, interactions
Magazine, July/August 1996
[2] Visual and Textual Consistency Checking Tools for
Graphical User Interfaces, Rohit Mahajan and Ben
Shneiderman, Transactions on Software Engineeering 23, 11 (November 1997), pp. 722-735
[3] Robert P. Emlen, The Distinctiveness of Shaker
Architecture. Originally published as the forword in Julie
Nicoletta, The Architecture of the Shakers. Phototgraphy
by Bret Morgan. Countryman Press, 1995
Last Modified Date: July 19, 2008
Bureau of Labor Statistics
