Usability is a measure of effectiveness.

It describes how effective tools and information sources

are in helping us accomplish tasks. The more usable the tool, the better we are able to achieve
our goals. Many tools help us overcome physical limitations by making us stronger, faster, and
more sharp-sighted. But tools can be frustrating or even disabling. When we encounter a tool that
we cannot work with, either because it is poorly designed or because its design does not take into
account our needs, we are limited in what we can accomplish.

In designing web sites our job is to reduce functional limitations through design. When we aim
for universal usability, we improve the quality of life for more people more of the time. On the
web, we can work toward universal usability by adopting a universal design approach to
usability.

Here we cover the concepts, principles, and processes for universal usability. Specific techniques
for universal usability are woven into context in the chapters that follow.

A Basis for Universal Usability

The concept of universal usability is informed by several initiatives, primarily accessibility,
usability, and universal design.

Accessibility
Since the World Wide Web Consortium established the Web Accessibility Initiative in 1999, the
imperative of web accessibility has gained the attention of individuals, organizations, and
governments worldwide. wai promotes best practices and tools that make the web accessible to
people with disabilities. They also safeguard universal web access by providing expert input for
development initiatives to ensure that accessible designs can be accomplished using current and
future web technologies.

Web accessibility is a critical element of universal usability. The guidelines produced by wai and
other accessibility initiatives provide us with techniques and specifications for how to create
universally usable designs. They ensure that designers have the tools and technologies needed to
create designs that work in different contexts.

Usability and user-centered design

Usability is both a qualitative measure of the experience of using a tool and a phenomenon that
can be measured and quantified as a concrete means to judge a design’s effectiveness.
Quantitative usability metrics include how quickly we complete tasks and how many errors we
make in the process. But usability can also be measured by qualitative measures, such as how
much satisfaction we derive in using a tool. “Learnability” is another important measure: how
quickly we learn to use a tool and how well we remember how to use it the next time. Usability
has an impact not only on our effectiveness but also on more fundamental qualities, such as
loyalty. The more usable the tool, the better we feel about using it and, in the case of web sites,
the more likely it is that we will return to the site.

The most common method for achieving usability is user-centered design (ucd). ucd includes
user-oriented methods such as task analysis, focus groups, and user testing to understand user
needs and refine designs based on user feedback. ucd involves determining what functionality
users want in a product and how they will use it. Through iterative cycles of design, testing, and
refinement, ucd practitioners continuously check in to make sure they are on track-that users like
and will be successful using the design.

Universal usability arises from user-centered design, but with a broad and inclusive view of the
user. ucd is applied to the task of designing web sites that are easy to learn and use by a diversity
of users, platforms, and usage contexts.

Universal design
Universal design incorporates access requirements into a design, rather than providing alternate
designs to meet specific needs, such as large print or Braille editions for vision-impaired readers.
A common example of universal design in the built environment is ramped entryways, which can
be used by everyone and eliminate the need for a separate, handicapped entrance. Universal
design has many benefits. A single design that meets broad needs is often less costly than
multiple designs. And designs that anticipate a diverse user population often have unanticipated
benefits. For example, curb cuts in sidewalks are intended to help mobility- and vision-impaired
users, but many others benefit, including people making deliveries, pushing a stroller, or riding a
bike.

Universal design is informed by a set of principles and guidelines developed by the Center for
Universal Design at North Carolina State University’s College of Design. The following are the
principles and guidelines that are most applicable to the web environment.

Principle One: Equitable Use

“The design is useful and marketable to people with diverse abilities. Provide the same means of
use for all users: identical whenever possible; equivalent when not.” The virtual environment is
far more flexible than the physical one. A single book cannot serve multiple readers because of
the limitations of the printed page. An online book can be made larger, smaller, colored, copied,
printed, read aloud. The flexibility of the web provides an excellent opportunity to design for
“same means of use.”

Principle Two: Flexibility in Use

“The design accommodates a wide range of individual preferences and abilities. Provide choice
in methods of use.” The web is flexible by nature, and users have choice regarding platform,
software, and settings. Users can choose to view web pages without images or in a variety of
layouts and typefaces.
Principle Three: Simple and Intuitive Use

“Use of the design is easy to understand, regardless of the user’s experience, knowledge,
language skills, or current concentration level. Eliminate unnecessary complexity and arrange
information consistent with its importance.” Most web pages have low signal-to-noise ratios,
with much of the page given over to organizational identity, advertising, and navigation.
Simplicity and direct access to salient features and information is essential in an effective design
strategy.

Principle Four: Perceptible Information

“The design communicates necessary information effectively to the user, regardless of ambient
conditions or the user’s sensory abilities. Use different modes (pictorial, verbal, tactile) for
redundant presentation of essential information and provide compatibility with a variety of
techniques or devices used by people with sensory limitations.” Because text on web pages is
machine-readable, it can be adapted to different contexts. For instance, text is accessible to
people who can’t see because software can read text aloud. Web technologies include provisions
for supplying equivalent text for nontext items, such as alt-text for images, captions for spoken
audio, and audio descriptions for video files.

Universal Usability Guidelines

Human-computer interaction (hci) pioneer Ben Shneiderman defines universal usability as
“having more than 90% of all households as successful users of information and communications
services at least once a week.” Note that Shneiderman is not calling for any use of technology
but rather successful use. He goes on to explain that, to achieve universal usability, designers
need to “support a wide range of technologies, to accommodate diverse users, and to help users
bridge the gap between what they know and what they need to know.”

It’s important to think about universal usability as a goal and not an outcome. Clearly, no web
site can accommodate every possible use context, any more than a potato peeler can be used
successfully by every individual. The web provides an environment that is far more flexible than
the built world, making the goal of universal access more feasible.

Moving beyond the “typical” user

The first step toward the goal of universal usability is to discard the notion that we are designing
for a “typical” user. Universal usability accounts for users of all ages, experience levels, and
physical or sensory limitations. Users also vary widely in their technical circumstances: in screen
size, network speed, browser versions, and specialized software such as screen readers for the
visually impaired. Each of us inhabits multiple points on the spectrum, points that are constantly
shifting as our needs and contexts change. For example, virtually all adults over fifty have some
form of mild to moderate visual impairment. And within that context our needs change as we
move from viewing web pages from the back of an auditorium to sitting in front of a large
desktop display monitor to walking down the street peering at a small mobile display. A broad
user definition that includes the full range of user needs and contexts is the first step in producing
universally usable designs.

Supporting adaptation
Next we need a design approach that will accommodate the diversity of our user base, and here
we turn to the principle of adaptation. On the web, universal usability is achieved through
adaptive design, where documents transform to accommodate different user needs and contexts.
Adaptive design is the means by which we support a wide range of technologies and diverse
users. The following guidelines support adaptation.

Flexibility

Universal usability is difficult to achieve in a physical environment, where certain parameters are
necessarily “locked in.” It would be difficult to make a book, and a chair to read it in, that fit the
needs and preferences of every reader. The digital environment is another story. Digital
documents can adapt to different access devices and user needs based on the requirements of the
context.

A web page contains text, with pointers to other types of documents, such as images and video.
Software reads the page and acts on it by, for example, displaying the page visually in the
browser. But because of the nature of the web, the same page can be accessed on a cell phone,
using a screen reader, or printed on paper. The success of this adaptation depends on whether the
page design supports flexibility. Pages designed exclusively for large displays will not display
well on the small screens of cell phones (fig. 2.1).

The web environment is flexible, with source documents that adapt to different contexts. When
considering universal usability, we need to anticipate diversity and build flexible pages that adapt
gracefully to a wide variety of displays and user needs.

User control

In many design fields, designers make choices that give shape to a thing, and these choices,
particularly in a fixed environment, are bound to exclude some users. No one text size will be
readable by all readers, but the book designer must make a decision about what size to set text,
and that decision is likely to produce text that is too small for some readers. In the web
environment, users have control over their environment. Users can manipulate browser settings
to display text at a size that they find comfortable for reading.

Flexibility paired with user control allows users to take control of their web experience and
shape it into a form that works within their use context.

Keyboard functionality

Universal usability is not just about access to information. Another crucial component is
interaction, in which users navigate and interact with links, forms, and other elements of the web
interface. For universal usability, these actionable elements must be workable from the keyboard.
Many users cannot use a mouse, and many devices do not support point-and-click interaction.
For example, nonvisual users cannot see the screen, and many mobile devices only support
keyboard navigation. Some users use software or other input devices that only work by
activating keyboard commands. For these users, elements that can only be activated using a
mouse are inaccessible.

Make actionable elements workable via the keyboard to ensure that the interactivity of the web is
accessible to the broadest spectrum of users.

Text equivalents

Text is universally accessible. (Whether text is universally comprehensible is another

discussion!) Unlike images and media, text is readable by software and can be rendered in
different formats and acted upon by software. When information is presented in a format other
than text, such as visually using images or video or audibly using spoken audio, the information
is potentially lost on users who cannot see or hear. Web technology anticipates format-related
access issues and supplies methods for providing equivalent text. With equivalent text, the
information contained in the media is also available as text, such as a text transcript or captions
along with spoken audio (fig. 2.2).

Text equivalents allow universal usability to exist in a media-rich environment by carrying

information to users who cannot access information in a given format.

Universal Usability in the Design Process

The World Wide Web is now more than eighteen years old-time enough for basic design
conventions to have emerged. In designing web pages we often base initial designs on widely
used page layout and navigation patterns, and use best practices such as consistency, modularity,
and simplicity in creating our web interfaces. However, the best method for making design
decisions is a combination of design best practices and familiar web layout conventions,
developed in close consultation with users at each stage of the design process. Involving users in
the development process helps us understand user requirements, which allows us to make
informed design decisions and produce more effective designs.

Web technology collects metrics about users: what operating system and browser they use, their
screen resolution, what page they visited just before their arrival at your site. And although it’s
certainly useful to know these attributes, they are not that helpful in defining the audience for
your web site. Web metrics will not tell you precisely why users visit your site, what they hope
to find from your site, or whether they are visually impaired in some way, expert or novice,
young or old.

In the end, even with the best web analytics, many things about your audience’s hopes,
motivations, and expectations will remain a mystery if you rely solely on web metrics to
understand your users.
In contrast, a target audience is a group of users that you have identified as critical to the success
of your site. For instance, you may be designing for a certain age group, such as grade-school
children, teens, or retirees. Or you may be designing for a specific technology, such as mobile
devices. Bear in mind that your target audience may share common interests, but they are not
likely to share access requirements. Some may be experts and others first-time users. Some may
be have low or no vision, and others may have mobility or dexterity issues. The same person
may access your site on a laptop, workstation, pda (personal digital assistant), and cell phone.
And although you may target a certain audience, others will come. For example, an investment
service for retirees will also draw visits from investors, competitors, family members, and those
lucky enough to enjoy an early retirement. It would be a mistake to design such a site to meet
only the needs of older users.

And there is much at stake by excluding users. Even if your web logs show that only 2 percent of
your users use a specific brand of browser, don’t make the mistake of using technology that
excludes those users. It’s bad business to exclude anyone from access to your information and
services, and there is no way to place a value on those users who you have excluded. Who
knows? Your next major donor might be one of the 2 percent you turned away at the door!

User research
The first step in any web site design process is to gather information about users-who they are,
what their goals are-and identify their requirements for working with the site. The research phase
is normally the most time-consuming phase of any design project, but that imbalance is due in
large part to the fact that the design and evaluation phase moves more rapidly because of the
time spent on research. With good user research, the decisions that drive the design are based on
a solid understanding of users’ goals and requirements and therefore are far more likely to hit the
mark without many cycles of iteration.

Surveys

Several techniques exist for collecting feedback directly from users about their goals and
behaviors. The information gathered from these collection techniques is subjective; it represents
what users say they do, which is not necessarily the same as what they actually do and care
about.

Surveys are helpful for collecting a large and broad range of responses about demographics and
goals. Web site surveys typically ask initial questions to help define the user: age, gender,
audience type (customer, potential customer, buyer, seller). Then there might be questions
related to frequency of use: first-time visitor, sometimes visitor, frequent visitor. The meat of the
survey is likely to be determining which elements of the site are most used, along with some
assessment of the effectiveness and enjoyment derived from using them. This question might be
represented as a list of site sections, each with a sliding scale measuring the success of use.
Finally, an open-ended question inviting general feedback is always a good idea. Although the
information is difficult to analyze, a simple read of the responses will yield common themes that
may be useful for planning.
Interviews

In-person techniques open the door to more accurate and detailed information gathering because
of the opportunity for interaction and exchange. In an interview, you inquire into user goals,
interests, needs, and behaviors. One effective method for understanding user behaviors is to ask
users to give a verbal walkthrough that describes their typical interaction and task flow when
accomplishing a goal. For example, in designing a new dating web site, you might ask users
from your target audience to describe their current process when interacting with a similar web
site and how they make connections without the help of the web. The key is to get the user
talking and keep him or her talking. Ask clarifying questions, pursue important details, and
periodically sum up the important elements of the conversation. Don’t be too quick to speak
when the conversation lags; pause, and give the user the opportunity to continue the discussion
thread. Also, don’t be too rigid in sticking to the script; digressions may lead to valuable insights.

Focus groups

Focus groups have a very different dynamic. Whereas the interview is all about the individual,
the focus group is about the collective-a group of users who share common concerns. Focus
groups have a number of benefits, not the least of which is economy; it’s an opportunity to hear
many different perspectives at once. Also, the collaborative nature of focus groups helps people
contribute insights that they may not have been aware of on their own. One user raises an issue
that resonates with another, and the second user picks up the issue and takes it further, and the
next, further.

Web analytics

With each page served, web servers collect basic information about the user and save the
information in a server log file. Web analytics involves using the data in the server logs to study
user behaviors. More advanced web analytics make use of additional tracking techniques that
usually involve embedding something on the client-a “bug” on the page or a session cookie-that
enables collection of additional information. With web analytics, it’s possible to reconstruct
elements of a web site session, such as:

 Where the user was before arriving at your site

 If the user used a search engine, which keywords were used
 The sequence of pages the user visited while on your site
 Attributes of the user’s configuration, including browser, operating system, and screen
dimensions and color settings
 Whether the user was a new or repeat visitor
 The last page in the session before the user left your site (fig 2.3)

 These and other site-specific metrics (the number of page requests helps determine which
pages are most used; the number of distinct hosts helps determine how many site visitors
there are) offer important insights into how users are working with your site, which is
essential to any redesign process. Just bear in mind that, although web analytics appear to
measure what is happening on your site, the reality is far more complicated. Many factors
 skew the data, such as browser caching, in which pages are stored locally on the client
machine. When a user visits a cached page, that visit will not be logged in the server log
file since the server was not asked for the page. Use web analytics, but don’t treat them as
the last word on user behaviors. Use them to complement the other user-centered
techniques described in this chapter.
 Field studies

 Observing users in their natural setting yields valuable insights and objective information
about user behaviors and the efficacy of designs. With observational methods, we move
beyond self-reported goals and behaviors to observed goals and behaviors.

 In a field study, you observe users working with a system, typically in their own context.
For example, in designing a library catalog system, observing library patrons navigate the
library is an excellent way to understand how they work with online catalog systems and
how such systems help or hinder them in achieving their goals. Field studies are
particularly helpful at the beginning of a project. For a redesign, observe users working
with your current system to identify points of conflict between the design and user goals.
For a new web site project, observe users working with a similar web site.

 Design and Evaluation

 The next step in the design process is to apply what is learned in the research phase to
creating designs that support the diversity of the target audience in accomplishing their
goals. The design phase is an iterative one in which we conceptualize designs to create
mockups, which we then evaluate and refine, often repeatedly, before arriving at a final
design and finished web site.
 Personas

 Personas are fictional narratives describing particular representative users and serve as a
stand-in for real users during the design process. Personas arise from the research phase
and are informed by surveys, interviews, focus groups, and other research methods.
Personas typically include a name, demographic information, level of expertise, and
platform details such as connection speed, operating system, and browser software.
Personas also include detailed information about user goals and motivations.

 For universal usability, personas should push the boundaries of the fictional “average
user” to include a range of use contexts and user motivations. Personas should represent
the full range of age groups, computer expertise, and access technologies, including
mobile devices, the wide but short screens of typical laptop computers, and screen reader
software for nonvisual access (fig 2.4).
Goal analysis

Users of a system do so in response to specific goals they are trying to achieve. When we roll out
of bed and into the shower in the morning, our goal is not turning on the water; our goal is to get
clean and wake up. It’s the tasks we undertake to accomplish this goal that involve water,
faucets, and soap. In design, it’s important to focus on goals rather than tasks in making design
decisions. A focus on goals helps us think outside the box and create better designs. Instead of
designing a shower from the perspective of the tasks it needs to support, we can focus on the
goal of getting clean and waking up, which opens the door to new approaches.

For example, let’s say our goal when interacting with a travel web site is to get from Boston to
Barbados without spending too much time or money. To accomplish our goal, our tasks are to
compare flight schedules and prices. The designer who designs for our goal will understand that
time spent in transit and cost are the primary factors and will design an interface that shows
information in a way that permits easy comparisons. Other information related to the trip, such as
meals served or type of aircraft, is secondary and available on request (fig. 2.5).

Goals come in many shapes and sizes and emerge from different perspectives. Users have both
personal and practical goals: being more productive, having fun, saving time and money.
Institutional goals also play a part: increase revenue, recruit more and better employees, offer
more services. With any web site project, goals should be the driving factor behind design
decisions and the compass to steer by throughout the design process.

Scenarios

Scenarios, or use cases, are brief narratives that tell the story of a particular user’s path in
accomplishing his or her goals. To construct a scenario, we use personas representing our users
and walk them through the various tasks necessary with the web site in order to accomplish their
goals. In composing a scenario, we can play out different approaches to design and functionality
and in the process identify possible problems with each approach.

Prototypes and wireframes

Paper prototypes are an inexpensive method for collecting user feedback on an evolving design.
A paper prototype typically illustrates the location of page elements, such as site navigation,
search, and content, and includes the labeling that will be used for these elements (page elements
are discussed in detail in the Wireframes section of chapter 3, Information Architecture). These
low-resolution mockups can be used in user testing to determine whether the organization of the
page and the navigation labels are easy to use and understand. They are obviously less helpful
for exploring the interactive elements of the page. For that we need functional wireframes.

Functional wireframes use the same minimalist design of paper prototypes, but on a functional
web site (fig. 2.6). They take more time to develop than paper prototypes but are well worth the
effort, particularly for sites that are built on complex information architectures and for web
applications that contain a high level of interaction. For a functional wireframe, several layers of
the web site are established to model the site’s architecture, navigation, and functionality. For
interactive sites, such as web applications, the wireframe should include a basic user interface in
order to play out and test the flow of the application with users.

User testing

User testing is a controlled and directed observation of user behaviors when working with a
design. User testing is used throughout the design process to evaluate different design
approaches by observing how well, or how poorly, they work in helping users accomplish tasks.

A typical user testing session has a tester and a participant who represents the target audience.
The user is assigned a set of tasks intended to put specific elements of a design to the test and
reveal any shortcomings of the approach. During the session, the user is asked to think aloud so
that the tester can understand the rationale behind his or her choices. The session normally ends
with an open-ended interview in which the user is given the opportunity to discuss his or her
experience with the system more broadly and provide insights and suggestions on how the
system might be improved.

User testing is useful throughout the design process to help identify usability problems. The
lessons learned from user testing can be used in refining the design and improving its universal
usability.

All development processes go through a series of stages that together form the classic “design
cycle, ” here related particularly to web site design.

Requirements

In larger projects the requirements phase may involve formal market and user research, web
analytics research, focus groups of current or prospective users, and formal usability testing. In
smaller projects the requirements phase often takes the form of team meetings with users, project
stakeholders, and project sponsors to develop lists of functional requirements.

Design

Design transforms lists of requirements into concrete form, first as rough layouts and page
wireframes, navigation interfaces, and site diagrams. Concentrate on fundamental structure and
function, and save detailed graphic design for later.

Development

Development is the actual building of HTML pages and coding of any associated web
applications. Even if you use an iterative design process (most web teams do), don’t get too far
into development until all major issues of design are settled.
Testing

All site designs require both functional testing (link checks, browser compatibility issues, cross-
platform issues) and editorial quality control. Too often web teams dominated by technologists
short-change the editorial considerations, forgetting that content also requires an extensive
quality-assurance process to produce a good product.

Linear or “waterfall ” development

Classic linear design projects march through each phase one at a time, completing each before
moving on to the next. Linear development works best where tried and true methods exist and
where the detailed specifications have been used successfully in the past. In less certain
circumstances, linear development can seem brittle and plodding.

Iterative model of design

Most projects deal with complex sets of unknowns by moving through a series of partial analyze-
design or design-build stages, progressively building complexity and design consensus into the
developing system, especially in the early planning and design phases of the cycle. The iteration
model begins to break down when cycles of design-build-redesign continue too far into the
development phase. These development iterations can result in production churning and much
wasted time and effort.

A hybrid approach

Good project management uses the strengths of both iterative and linear models, where many
design iterations are encouraged early in the process but are strongly discouraged later in the
development and testing phases, when efficient development effort and control of the overall
project scope and schedule become paramount.