Web Site Usability:

A Tutorial
Anne-Marie Suciu
Spring 2012
Northeastern University
Lesson 1:
Define Your Audience
Overview
In order to begin designing your web
site, you must first identify and fully
familiarize yourself with its target
audience.
Identify such characteristics as the
age, gender, education, occupation,
income, and computer experience of
your users.
Be sure to separate your own
knowledge from that of your users: in
most cases, they will not have the
same amount of technical experience.
Understanding Your Audience
In order to develop a detailed profile of
your target audience, conduct surveys and
interviews with sample users.
If you cannot reach users directly, use
online surveys, market research reports,
and the Census Bureau to gather sufficient
information about your audience.
Personas and scenarios are two
techniques that may strengthen how well
you understand your audience, while also
helping you to discern new details.
Personas
The primary purpose of a persona is to define a major group of users
for your web site, which in turn improves your ability to recognize the
abilities, limitations, needs, and expectations of your audience
members.
In order to create a persona, carefully envision the characteristics of a
potential user of your web site.
What occupation does the user have? How much experience does he
have with computers and the Internet? What are his interests and
hobbies? Does he rely on technology for specific purposes?
Incorporate as many details as you can in order to truly understand
how this fictional character would approach your web site.
Include a name and picture in order to be able to refer to a specific
persona during your design process.

Personas
Michael is a 38-year-old creative director for a well-known advertising agency. Recently divorced,
Michael lives in a downtown condominium, while his two children live with his ex-wife in a nearby
suburb. He is extremely passionate about his work, often remaining in his office well past business
hours. His dedication and excellent output have earned him promotions throughout his career,
ultimately taking him to his present directorial role; he still strives, however, to earn the position of a
partner in the company. Until then, Michael continues to work tirelessly and produce some his firms
most profitable advertising campaigns.
Intelligent and innovative, Michael has always enjoyed keeping up with modern technology. He has used
laptops, cell phones, and portable MP3 players for over a decade, upgrading his devices every few years. Michael
also did not hesitate to purchase an iPad, which he uses daily for activities ranging from e-mail to news reading,
brainstorming to GPS navigation. He furthermore depends on his Smartphone for organizing and managing his
contacts, appointments, and meetings, as well as for receiving updates from clients and co-workers.
Michael began purchasing stock from various companies about fifteen years ago; he has since developed a
lucrative portfolio that is now largely managed by his broker. Despite the demands of his job, Michael routinely
sets aside time each morning to review market trends and the performance of his portfolio, exploring any possible
trade options to recommend to his broker.
This example persona represents a fictional
user that may visit a stock trading web site.
Scenarios
A scenario describes how a specific individual would use
your web site under various circumstances.
Whereas a persona creates a fictional character, a scenario
crafts a story for that persona, illustrating a sequence of
events in his or her daily life.
As a result, a scenario allows you to explore past the
abstract design of your site and consider it in the context
of an actual user.
Scenarios
Motivated by the users themselves, scenarios can reveal
valuable requirements for your website.
For instance, a clothing retailer may choose to omit sorting
options on his site because, in theory, they allow users to
easily find the cheapest items and to ignore those with high
prices.
However, a scenario may reveal that users who do not have
time to go through all items would leave the site without
even purchasing a low-end item, due to the inconvenience
posed by the lack of sorting options.

Scenarios
Since Isabella has some spare time before leaving for work, she decides to use her
desktop computer to visit a few web sites. She starts by clicking on her Facebook
bookmark; after the site loads, she views a video of a dog on her News Feed. She
reads the caption and follows a link that leads her to our Facebook page. A regular
visitor to our web site, she then decides to also check our site for additional
updates. She finds the link on the sidebar of the Facebook page and, after arriving at
our web site, clicks on the Our Dogs tab to see if any more dogs have been adopted
and whether new ones have entered the shelter. She then selects the How to Help
tab; once the page loads, she clicks on the Chip In option to view which dogs need
financial support for medical treatment, transport, and other issues. She ultimately
chooses the Donate Now option for three dogs. After the three individual payments
are complete, she decides to re-visit the Our Dogs page and then clicks on the
Share option to post the pages link to her Facebook profile.
This example scenario illustrates how a user
interacts with a dog shelters web site.
Lesson 2:
User Needs Analysis
Overview
After developing an understanding of your audience, it is
essential to determine why users would visit your web site.
By discovering user needs, you will be better able to establish
the goals of your web site.
Furthermore, you are less likely to experience costly redesign
problems if you discover user needs early in the design
process.
Additional researchin the form of surveys, focus groups,
and interviewsshall provide the data needed to help you
discern the needs of your users.

Surveys: What to Ask About
Demographics
By collecting demographics, you will be able to confirm that
your surveys respondents actually meet the profile of your
target audience.
In addition, by asking for such information as your users age,
gender, education, profession, computer skills, and
nationality, you shall gain a stronger understanding of the
lifestyle and computer experience of your audience.
As a result, demographics may help reveal the expectations
as well as limitations of site users.
Surveys: What to Ask About
Preferences & Problems
Questions concerning the preferences of your users may consider a
wide range of factors.
For instance, a music blogger may ask "What types of music do you
enjoy?" in order to discern a focus for his site's content, while a small
business owner may inquire about the level of product variety desired
by users.
It is likewise important to inquire about the problems that your users
commonly experience while browsing the web and visiting web sites.
For example, you may ask users to rank a list of common browsing
issues (e.g. slow speed, lack of scalability, poor security, getting stuck)
by their level of irritability, or pose questions specific to your site type,
such as "Which of the following problems have you experienced while
placing an order online?".
Surveys: What to Ask About
Design Features
It is extremely helpful to include questions that relate to the sites
design.
In this area, however, you cannot depend on stereotypes to determine
what designs are suitable for your users.
For instance, you may assume that a pink background and elegant text
would be appropriate design choices if the majority of respondents
indicated that they were female.
Yet such an assumption is largely based on stereotypes and cannot be
accurately applied to a general audience.
Posing such questions directlyDo you prefer a pink
background? Does elegant text appeal to you?is more helpful in
planning your sites design.
Interviews & Focus Groups
Interviews and focus groups often
provide large amounts of qualitative
data that can significantly influence
your design and reveal important
usability problems.
Interviews are generally carried out
with one person, while focus groups
involve multiple people.
Interviews & Focus Groups
Some important areas of questioning include:
User needs: Why would you visit this web site? What do you expect
to gain from this web site? What purposes would you like this web
site to fulfill?
Functionality: What kinds of features must be included on the web
site? Which of these features are you least likely to use? Is there
anything that you would really like to do using the site?
Mock-up review/walk-through: Does the look and feel of the web
site meet your expectations? Do you like the layout and use of
color? Is the web site easy to use? Would you become frustrated
using this web site? Does the appearance correspond with the
site's concept?
Competitive Analysis
In order to gain additional user needs, a competitive analysis can be
carried out rather quickly and easily.
You may review competitors' sites, explore sites within your
domain, or investigate sites that have comparable functionality.
However, do not depend on the analysis for specific design ideas, as
you may risk copyright violations.
Rather, focus on exploring similar sites with the goal of attaining
additional user needs and to assess common usability concerns.
For each site that you explore, be sure to note its overall strengths
and weaknesses, as well as areas of poor usability to avoid.
Competitive Analysis
Strengths: Search box for quick
game access, featured game
prominently displayed, grid
structure, amount of color is
appropriate for age group
Weaknesses: No particular order
for games, animated ad is
distracting
Usability concerns: Triple-menu
bar creates some confusion
This example competitive analysis explores the strengths
and weaknesses of a gaming site for young users.
disney.go.com/games/#/games/
Lesson 3:
Task Analysis
Overview
A task involves a set of steps that leads to the fulfillment of a
specific goal.
While navigating a web site, users have certain goals that are
each made up of a sequence of tasks.
It is key to note that the tasks themselves are goal-oriented
that is, the user completes each task with a goal in mind.
By analyzing the procedures followed by your users, you shall
be better able to create a web site that satisfies their goals,
while also simplifying their experience.
Hierarchical Task Analysis
In order to decompose an individual task, hierarchical task
analysis involves three main steps:

1. Determine the principal goals (i.e. outcomes) that
the user expects to achieve.

2. Specify the steps needed to complete each goal.

3. Identify opportunities for increasing efficiency.
Hierarchical Task Analysis
Step 1. Determine the principal goals (i.e. outcomes) that the
user expects to achieve.

Search for coffeemakers
View listings for coffeemakers
Choose a coffeemaker
Add coffeemaker to cart
Continue to site checkout
Complete shipping & billing forms
Submit order


This example hierarchical task analysis follows the steps
taken by an individual to order a coffeemaker.
Hierarchical Task Analysis
Search for coffeemakers
Locate search box
Enter desired search criteria
Submit search

View listings for coffeemakers

Choose a coffeemaker

Add coffeemaker to cart
Locate "Add to Cart" button on chosen
coffeemaker's page
Click the button

Continue to site checkout
Go to shopping cart page
Locate "Proceed to Checkout" button
Click the button
Complete shipping & billing forms
For both forms:
Enter Name
Enter Address
Enter City
Enter State
Enter Phone Number
For billing form:
Select credit card carrier
Enter credit card number
Enter CSV number

Submit order
Locate "Review Order" button
Click the button
Locate "Submit Order" button"
Click the button

Step 2. Specify the steps needed to complete each goal.

Hierarchical Task Analysis
Step 3. Identify opportunities for increased efficiency.
Proceed directly to checkout from coffeemaker's
page
Provide option to use same information on shipping
and billing forms
Eliminate selection of credit card carrier
(automatically detect through credit card number)
Lesson 4:
Writing for the Web
Overview
Text is a fundamental part
of all web sites, since it
serves as the primary
vehicle for communication.
Consequently, great care
must be taken to ensure
that text on your web site is
usable.

en.wikipedia.org
In this example, text serves a central role in
conveying information to users.
Effective Writing
To accomplish effective written communication, your
content should entice readersparticularly early onand
present them with helpful information.
Text should assist users in steering your web site: you should
make it clear whether they are viewing relevant content or
not and where to proceed to find additional information.
Text needs to be consistent with the users tasks and goals,
directing the user in a logical manner that assists in his
decision-making.
For instance, site options must be clearly stated and ordered by
their value to the user.

Key Guidelines for Writing
Accuracy: Responsible web designers
perform research prior to presenting
users with information. Do not
mislead your readers with content that
is not factual.
Succinctness: On the whole, web
users do not expect to experience
heavy reading loads. Maintain concise
yet effective language to convey your
message.
Simplicity: Regardless of how well you
have targeted your audience, it is
important to use language that can be
understood by the widest range of
users possible.
freerepublic.com/
In this example, users can navigate to
topics of interest without having to
complete a large amount of reading,
Key Guidelines for Writing
Consistency: Sudden changes in
tone, language, spacing, and diction
can easily confuse readers. Maintain
consistency in such areas, and ensure
smooth transitions when a change is
needed.
Compactness: Large blocks of text
may be daunting to your visitors, as
they increase the time needed to find
information. Break up large chunks of
text and use headers to further
facilitate site navigation.
breitbart.com
In this example, text is succinctly laid
out in multiple blocks to allow for
quick scanning.
Lesson 5:
Color
Overview
Color is a powerful tool that can
achieve various effects on your
web site, including:
Calling attention to specific
items
Highlighting important
content
Items can be grouped
together by color
Reinforcing your page layout

us.gov
In this example, color guides users to different
sections of the page.
Limitations & Considerations
Although the application of color can powerfully impact
various features of your web site, it does carry multiple
limitations:
Preferences in color schemes vary from person to
person
Users who are visually impaired may not see certain
colors
Some colors hold different meanings and
connotations across cultures
For instance, red is a color of mourning in some
cultures, while others associate the color with
happiness.
Certain colors are more suitable for some age
groups than others
For example, bright and bold colors would be
appropriate for children's sites, yet not as
appealing for the elderly

nickjr.com
Bright colors are well-suited for the sites
young audience, but may not be appropriate
for older audiences.
Limitations & Considerations
Technology carries several constraints on the
effectiveness of color:
Some devices rely on black-and-white or
reduced-color screens
Colors may be rendered differently across
varying hardware platforms
Environmental factors (such as bright
sunlight) can easily influence the appearance
of colors on a monitor

As a result of such constraints, it is important to
test your sites designs in black and whitedoing
so will help ensure that different colors can be
distinguished from each other.


Effects of low contrast and
converting colors to grayscale
Lesson 6:
Typography
Overview
The typeface that you choose should
correspond to the style of web site
that you are creating.
Elegant fonts, for example, are
appropriate for very professional web
sites, while a modern typeface can be
applied toward informal sites, such as
a school club.
Since the primary function of text is to
communicate information, you must
take into account the readability of a
typeface before considering its
attractiveness.
alumni.northeastern.edu
Large and distinctive fonts attract attention to the
pages title and main message, while a small and
standard typeface is used to convey information
in a clear manner.
Key Guidelines
When choosing a typeface, be sure to take into account the component
of the web site
For example, standard web fonts (e.g. Arial, Georgia) are highly legible on
screens and therefore suitable for body paragraphs; in contrast, expressive
fonts (e.g. Broadway, Mistral) should be restricted to headings
Take color into considerationin particular, ensure that the font color
has sufficient contrast against the page background
Avoid excessively small fonts
If text is displayed graphically, use the alt and name attributes to
ensure screen reader access
DO NOT CAPITALIZE WHOLE PARAGRAPHS, as doing so decreases
the readability of your page


Lesson 7:
Forms
Overview
Forms range widely in length and
function.
For example, a search form may require
only one field entry, while online
shopping sites frequently require users
to fill in at least a dozen fields.
Online forms often pose difficulties to
users because they frequently fail to
provide adequate feedback and
consistency.
Users may also be frustrated by vague
instructions and inadequate or missing
options.



Example of an online form. Radio
buttons ease the completion process for
users, while also reducing errors.
Options cover all possible responses to
avoid untrue input.
Key Guidelines
Create an obvious sequence of steps for
your user to follow as he completes a form.
For example, you may wish to number steps
on a page or at least ensure that the user can
clearly discern the next step (especially if it is
the submission button).
When possible, keep forms short.
Use radio buttons or checkboxes (as
opposed to free-form text fields) to help
reduce errors.
Apply boldface or insert asterisks to indicate
which fields are required.

Example of an online form. The asterisks inform users
which fields are required; the large "Submit" button
helps ensure form submission.

Lesson 8:
Navigation
Overview
The manner in which you display your web sites navigation is
crucial to its overall usability.
Users need a clear path to the information that they seek.
This path should minimize both the time and complexity of
locating relevant information.
Metaphors, navigation bars, and text links are among the
features that facilitate navigation.
Metaphors
Using visual metaphors may
assist you in organizing
navigation options.
For example, a hotel may
arrange its content options
around the image of an actual
check-in desk.
However, if a visual metaphor
does not suit your web site,
do not attempt to use one.
Weak metaphors are unlikely
to assist users in navigation.

www.drippinginfat.com: Example of a site metaphor.
Navigation Bars
Given the proliferation of navigation
bars across software programs and
operating systems, using a navigation
bar on your site presents the user with a
familiar tool.
Horizontal navigation bars can logically
organize content and occupy very little
screen space
They can be expanded through drop-
down menus that further help the user
orient the site.
Vertical navigation bars offer the same
benefits, but consume horizontal space
that could be instead used for body text.
Ebay.com & FoxNews.com
Examples of vertical and horizontal
navigation bars.
Text Links
Text links may use words,
phrases, or sentences to
direct a user to another
section or page of the site.
Text links may appear almost
anywhere on a site, including:
Side bars
Embedded within body text
As breadcrumbs tracing
the users path
Headings
Progress bars
Expandable outlines
drudgereport.com
Text links are used throughout the web
site to direct users to relevant content.
amazon.com
A progress bar allows users to move
through search results at varied intervals.

newegg.com
Breadcrumbs present users with the
path they have taken to reach a page.
Alternative Solutions
If a user cannot find relevant information by
using a navigation bar, text link, or icon (see
Lesson 9), some alternative navigation
techniques include:
Site Maps
Allow users to understand the scope and
structure of the site
Can be presented in both graphical and
text forms
Indexes
Like indexes found in books, site indexes
provide users with an alphabetical listing
of the sites topics
neu.edu
A site index provides an alphabetical
listing of the sites topics.
Alternative Solutions
Table of Contents
Similar to a site map, a
table of contents provides
users with a list of site
topics
The topics are ordered by
the users anticipated
path through the site and
grouped by hierarchical
relationships
apple.com
A site map allows users to see how
content is organized.
plcs.net
A table of contents orders the
sites topics in a logical manner.
Alternative Solutions
Search
If your site is very large, a search function
will allow users to quickly find what they
are looking for
However, search functions are not
entirely foolproof
Users may search for terms that are
either too broad or too restricted
As a result, avoid making a search
function your central navigation method
sephora.com
Example of a simple search box.
priceline.com
Example of a parametic search.
Lesson 9:
Icons
Overview
In order to graphically represent a particular message, an
icon may be used.
Icons generally are created without many details, bearing a
very basic appearance and small size.
If you choose to include icons, make sure that they
correspond to the users task.
For example, if a user wishes to e-mail an article that he has
read on a news web site, an icon displaying an envelope would
be appropriate as well as helpful in fulfilling the task.
Avoid using icons merely for adornmentthey should aid the
user in some way (e.g. navigation, understanding a text link).

Benefits of Icons
Some potential benefits of icons include:
A user may process common and well-known icons almost
instantly
Many icons can be recognized regardless of the users
language and culture
Icons often require less space than text
A web sites appearance may be enhanced by icons, which
offer a visual contrast against text
Drawbacks of Icons
Some potential drawbacks of icons include:
Icons may be misinterpreted by a user, thereby causing
unintentional clicks and frustration
If an ALT tag is omitted, icons are essentially useless to users who
are visually impaired
Some messages cannot be conveyed universally; as a result, some
icons may not be understood by users in certain countries
Too many icons may overwhelm the web sites overall visual
design, resulting in a cluttered appearance
Features of Effective Icons
Familiar: The icon can be readily recognized by a wide range of users.
Unambiguous: The icon is not subject to multiple interpretations.
Memorable: The user does not need more than a few site visits to
learn the icon.
Consistent: The same icon represents the same message across
pages.

Examples of commonly used and
effective icons.
To ensure comprehension, us.gov
supplements icons with text.
Lesson 10:
Animation
Overview
Animation can fulfill several useful purposes, yet it also
carries a range of usability issues:

Purposes of Animation
Gaining the users attention
Explaining complex
processes
Creating realistic
representations
Facilitating navigation

Drawbacks of Animation
Easily distracts the user
Sometimes incompatible
with certain browsers
Often inaccessible to users
relying on screen readers
Longer download time than
text and static images
Guidelines for Using Animation
Communication, not decoration: Animation should
aid the user in completing tasks and goals. You
should therefore avoid using it solely for
embellishment, but can use it for elaborating or
clarifying concepts that cannot be easily explained
with text.
User control: Avoid setting the animation to loop
infinitely. Instead, provide the user with controls
that allow him to start and stop the animation based
on his own needs.
Limited presence: Since animations are a significant
source of distraction, avoid using more than one per
page.
An animation used
by The Physics
Classroom to
illustrate vibrational
motion
Lesson 11:
Evaluation
Overview
Before publishing your web site, conduct an evaluation to
assess its level of usability.
Evaluation is a crucial step toward recognizing any problems
present in your design.
Once you have addressed initial problems, evaluation will
become a key part of your sites maintenance.

Types of Evaluation
Heuristic evaluation
A group of experts inspects and evaluates the site using an accepted set
of criteria (e.g. Nielsens 10 Guidelines)
The evaluation provides validation for the sites design choices and can
help you discover significant usability problems early on
Focus groups
In addition to establishing user needs, focus groups can provide
feedback on the sites usability
Focus groups provide a reasonable indication of the sites likelihood for
success
Unlike expert critiques, however, feedback gathered from focus groups
is based on opinions and often very basic
Types of Evaluation
Online feedback
If your site has already been launched, various sources can provide an
indication of its usability:

Feedback pages: allow visitors to directly submit comments or inquiries
about the site

Traffic statistics: provide useful demographics about users and the
browser they are using; also offer reports about users browsing time and
visiting frequency

Revenues: poor usability may be partially at fault if an e-commerce site
is experiencing revenue below expectations

Types of Evaluation
Usability Study
To conduct a usability study, first choose a usability issue(s) to
evaluate; examples include:
Learnability
Memorability
Error handling
Consistency
Then, determine the appropriate measure(s) for the chosen
usability issue
For instance, in order to evaluate the learnability of your site, you
can measure task completion time
Types of Evaluation
Usability Study (cont.)
Compose a set of tasks to which the selected measures can be
applied
For instance, if you are evaluating the learnability of a shopping
site, a task may consist of the steps needed to submit an order
Recruit about three to five participants (as a minimum) to
complete the tasks
Observe participants
Take thorough notes, consider using the think-aloud technique, use
a video recorder if you anticipate needing to review the test
Analyze your results using descriptive and inferential statistics
Draw conclusions about your sites usability using your results