CERTIFICATE IV – WEB DESIGN

Usability
Manual
C3539 Contribute to
Personal Skill Development
and Learning
Brendan Timmons
5/4/2008

Brendan Timmons 5/4/2008

Page | 1
Contents
Manual Summary..............................................................4
About this manual..........................................................4
Understanding Usability....................................................5
What is usability?........................................................5
Properties.......................................................................6
Ease of Learning.........................................................6
Efficiency of Use..........................................................6
Memorability...............................................................6
Error Frequency & Severity.........................................6
Subjective Satisfaction................................................6
Employing Usability in Web Design................................7
User Centered Design.................................................7
Benefits of Good Usability..............................................8
Planning......................................................................8
Effects of Good Usability.............................................8
Analysis.............................................................................9
Evaluate......................................................................9
Learn.........................................................................10
Conducting a Task Analysis.......................................10
Personas....................................................................11
Information Architecture.................................................12
Determining what comes first......................................12
Structure......................................................................12
Evaluation and Testing....................................................13
Evaluating Usability......................................................13
Testing Usability...........................................................14
Planning the Test.......................................................14
Post-Test....................................................................15
Definitions.......................................................................16
Tools................................................................................17
Web Tools.....................................................................17
Web Development tools...............................................17
Web Testing Tools.........................................................18
Brendan Timmons 5/4/2008
Page | 2
Resources........................................................................19
Links.............................................................................19
Books...........................................................................19
Index...............................................................................20

Brendan Timmons 5/4/2008

Page | 3
Manual Summary
About this manual

This manual was designed to inform Developers of the

importance in understanding and utilizing usability to the
maximum of it’s potential. Throughout this text you will learn
the importance of usability and the correct procedures to
test, and implement good usability into your product.
Usability in Web Design is especially crucial to the overall
success of the website, on keeping users coming back to
your site by making their time spent on your site as simple
and enjoyable as possible. By following a usability
engineering process, users' abilities to find information and
satisfaction with Web sites improve significantly.

– Brendan Timmons, Author.

Brendan Timmons 5/4/2008

Page | 4
Understanding Usability

What is usability?

Usability measures the experience between user and

interface and how well users can learn to use the product in
order to achieve their desired goal, be it for systems, web
sites or software or any other kind of technology.

Definition:

"[Usability refers to] the extent to which a

product can be used by specified users to
achieve specified goals with effectiveness,
efficiency and satisfaction in a specified
context of user."

- ISO 9241-11

Brendan Timmons 5/4/2008

Page | 5
Properties

In order to fully understand usability you must focus on the

five key properties usability generally measures. Each of the
five properties come together and are used to test and
define the overall usability of a product or technology.

Ease of Learning
Ease of Learning is used to describe how fast a new user
can learn how the product works enough for them to perform
basic tasks with relative ease.

Efficiency of Use
Efficiency of Use is basically an extension for Ease of
Learning in the sense that once the user has learnt how to
use the new system how fast can they quickly and efficiently
accomplish the tasks set before them.

Memorability
Memorability is used to describe how much knowledge the
user retains from the time they last used the product, and
how effectively they are able to execute tasks, or how much
they have to re-learn in order to efficiently use the product.

Error Frequency & Severity

Error Frequency and severity describes how often the user
makes mistakes, if any at all and how serious the errors
made are, and finally, how the user recovers from such an
error.
Subjective Satisfaction
Subjective Satisfaction simply describes how much the user
likes using the system or interface of the product.

Brendan Timmons 5/4/2008

Page | 6
Employing Usability in Web Design

User Centered Design

One way of employing good usability into web design is User
Centered design (UCD). User Centered Design uses the
basic concept of design your website around your users’
wants and needs instead of a completely self centered
website. Because if your website isn’t useful to the user,
don’t expect them to return to your website.

Creating a successful website requires good usability, and in

this case User Centered Design is the perfect direction to
look for success. In order to achieve this you must balance
the needs of the user and the company. The first step is to
clearly state the needs, goals, and objectives for both the
company and the user.

Begin by asking yourself questions such as:

– What are the primary business objectives of
your company and how can you transfer them
to the Web?
– Who are the users of your Web site?
– What are your users' tasks and goals?
– What information do your users need?
– What form of media do your users need
information to be relayed to in?
– What functions do your users want from the
Web site?

Brendan Timmons 5/4/2008

Page | 7
Benefits of Good Usability

The benefits of having good usability are plentiful, if you start

thinking about usability early in the design process,
specifically User Centered Design you can save yourself
enormous amounts of money and possibly make even more
money.

Planning
If you don’t start planning usability early it can cause some
major ramifications later on. The cost of changing a feature
or layout will increase exponentially the longer you leave it. If
the flaws in a features’ usability are fixed early on it costs
much less than fixing it after the product has been released.
Some estimate that fixing a usability problem in the
development stages of a project can cost up to ten times the
amount if it had been fixed in the design stage.

Effects of Good Usability

Aside from saving money, having good usability can also
help you gain more money, if a user visits your site and finds
what they were looking for with relative ease, then there is a
good chance they will buy your product, return to the web
site, and tell others of your website.

Purely from a financial point of view employing good usability

early on in the design process of your web site, the benefits
are quite clear.

Brendan Timmons 5/4/2008

Page | 8
Analysis

There are a few things you should take into consideration

when analyzing your website for the potential impact of
usability on users and the website itself, such as Evaluating
your current site if you have one, learning about your current
or potential users, conducting task analysis’s, developing
personas , writing scenarios, and most importantly; setting
achievable usability goals.

Evaluate
One of the first things to do is review your current website if
you have one, evaluating how well it is meeting your
company’s objectives, standards, and usability goals.
Equally important, you must evaluate how well your website
is meeting the expectations and goals of users that visit your
site. You must find out how easy they find using your current
site is and what needs to be improved if they have any
problems.
Finding out if users are having problems or not can be
achieved in multiple ways, you might consider creating an
online survey to allow users to express their views on your
website. You may also want to conduct usability tests,
evaluate your web logs to find out how users are using your
website.
When evaluating your website you may also want to find out
if it complies with basic web guidelines. This can be
achieved through reviews of the Web Design Guidelines.
Remember that when evaluating your website,
understanding your users and listening to them is the easiest
way to find ways to improve and refine your website.

Brendan Timmons 5/4/2008

Page | 9
Learn
Learning from, and understanding your users and to improve
usability on your website, when learning about your users is
to ask about their:
– needs for information
– expectations about your site
– levels of knowledge about the subject matter
– levels of experience with the Web and similar
types of sites
– how much they are willing to read

There are multiple techniques for learning and gathering

data about users. Such techniques include:

Conducting a Task Analysis

A task analysis is just a means for identifying the needs of
users that will be using your website; there are many ways of
learning and gathering data about users. Such techniques
include:

Usability Testing
Conducting a usability test requires everyday users to sit
down and attempt to complete certain goals as efficiently as
possible while being observed by the development team to
show them directly what is good about the website and what
could use some work.
How efficiently the user completes the set tasks shows you
the level of usability currently employed in the website, this
helps you identify any usability problems that the site has
and to determine the participant’s satisfaction of the site from
their feedback.

Online Surveys
Online surveys can be particularly useful when trying to
determine what a large number of users think of your
website; because the survey is online the potential for lots of

Brendan Timmons 5/4/2008

Page | 10
feedback is good allowing you to find out what the general
consensus of your website is.
Times when you may want to think about using online
surveys are right before you redesign your website; to see
what users want from your website or right after a website
redesign to see what users think about what you’ve done.
Interviews
Face to face interviews are useful to help you better
understand the types of users that are visiting your website
to find out their attitudes, and thoughts on your website.
Interviews are usually coupled with an online survey so you
can get both large and more personal feedback about your
site.
Card Sorting
Card Sorting is a way to better implement user ideas into the
development process. A card sorting session consists of a
user sitting down with a handful of cards and must re-
arrange the cards on a board to form a website that makes
sense.
Card sorting helps developers to figure out the layout of
content that is preferred by their target users and that they
see in a logical way.

Personas
A persona is a fictional character created to aid in the
analysis process. Usually used after you have gathered all of
the information required from your Task Analyses you may
want to create some personas from the data collected.
Example,

Name: Dave Collins

Age: 21
Education: Studying for Law Degree, History Degree
Job: Works part time at the local alcohol store
Internet Use: surfs the web in his spare time and when
studying

Brendan Timmons 5/4/2008

Page | 11
Information Architecture

When a user comes to your website they expect to find the

information they seek, Information Architecture is a term
used to describe giving the user what they need as quickly
and concisely as possible. When you are looking at
information architecture you must brainstorm what users
would mainly come to your site for in order to find a way to
prioritize what will be displayed first, second, third and so on.

Determining what comes first

When you are designing your home page you really want to
think about the main reasons a user would come to your
website, to better display the main information they may
seek so that they won’t have to go searching around the
website to find the information they seek.
Determining what actually goes onto the home page is
usually found in the data you would have collected in the
Analyzing process. Always be sure to place the most
important and frequently performed tasks on the front page
of your website. Some things that most companies put on
the front page are; News items, frequently purchased
products.
A technique for determining what should go on the front
page and how it’s structured are the layouts collected from
the card sorting task analysis, using the most common
layout should be a safe bet. This technique is particularly
useful because it is made by the users and it is how they
expect the website to look.

Structure
A technique for determining what should go on the front
page and how it’s structured are the layouts collected from
the card sorting task analysis, using the most common
Brendan Timmons 5/4/2008
Page | 12
layout should be a safe bet. This technique is particularly
useful because it is made by the users and it is how they
expect the website to look.
Creating a sitemap can help you determine the
organization of the site structure. The creation of a
website wireframe can also aid in the process. A
wireframe is just a very basic look and feel design for the
website with just a couple of boxes showing where
everything will be located.

Brendan Timmons 5/4/2008

Page | 13
Evaluation and Testing

Determining the usability of your website can be done in two

ways Usability Evaluations or Usability Tests.

Evaluating Usability
Usability evaluations do not require users working with the
website but require an expert to evaluate the website
through one or more of the following evaluations:
– surveys and questionnaires
– observational evaluations
– guideline based reviews
– cognitive walkthroughs
– expert reviews
– heuristic evaluations

Once you have a prototype website ready for testing, you

should consider having a usability evaluation done by an
expert in usability. Most experts will then use their findings in
the evaluation to create certain tests for the website to
determine if there are any major problems with the usability
of your site.

Brendan Timmons 5/4/2008

Page | 14
Testing Usability
Usabilitytests are usually generated by a professional in
usability, in which users are sat down and test the website
and are observed by the usability expert. Usability tests play
a key part in User Centered Design (UCD) as mentioned
above.
The main things you are looking for in a usability test are,
– Identifying any usability problems that the site
has.
– Collecting data on participant’s performances
during the test
– Participant satisfaction with the website

Planning the Test

Usability tests are usually created by a professional in
conjunction with the development team to decide the main
testing points, which then the usability expert will draw up a
test plan, and relay to the development team where the team
will decide with the expert what needs to be changed,
included, and excluded.
Things usually included in the test are:
– Scope what are you testing?
– Purpose why are you testing?
– Schedule and Location when and where
will it the test take place?
– Participants how many and who will
participate?
– Scenarios what will the participants
have to do?
– Questions what will you ask?
– Data to be collected what will you
record?
– Set Up what technologies
will you need to set up?
– Roles what roles will people
play?

Brendan Timmons 5/4/2008

Page | 15
Brendan Timmons 5/4/2008
Page | 16
Post-Test
Once the test has been completed the professional will
determine if there are any major problems with the website
and offer advice in fixing the problem in which the task test
participants had trouble carrying out.
You should perform tests often, the entire way through the
design and development process to avoid any problems
before its too late, the earlier they are found, the easier and
cheaper they are to fix. The more tests you run the more
confident you can feel that the end product will satisfy users
of the website.
Also, remember when the testing is complete, rely more on
performance than preference.

Brendan Timmons 5/4/2008

Page | 17
Definitions
This section describes relevant terms in the area of
website design usability

Usability

– The extent to which a product can

be used by specified users to
achieve specified goals with
effectiveness, efficiency and
satisfaction in a specified context
of user.

Wire frame
– A chart giving an overview of the
components and features of a web page.
Wire frames are developed during the Define
phase of a project and provide instructions
to both designers and programmers for how
pages should look and behave. Download an
example wire frame.

User Centered Design (UCD)

– 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. ...

Information Architecture

– Information Architecture is a field and

approach to designing clear, understandable
communications by giving care to structure,

Brendan Timmons 5/4/2008

Page | 18
 context, and presentation of data and
information

Personas

– Personas or personae are fictitious

characters that are created to represent the
different user types within a targeted
demographic that might use a site or
product

Brendan Timmons 5/4/2008

Page | 19
Tools
Web Tools

Web Development tools

www.adobe.com/
www.adobe.com/products/photoshop/index.html
www.adobe.com/products/dreamweaver/
www.adobe.com/products/fireworks
www.adobe.com/products/creativesuite/web
www.notepad-plus.sourceforge.net/
http://www.microsoft.com/expression/

Brendan Timmons 5/4/2008

Page | 20
Web Testing Tools

HTML Validators
http://validator.w3.org/
http://www.htmlhelp.com/tools/validator/

CSS Validators
http://jigsaw.w3.org/css-validator/validator.html#validate-by-
uri

Link Checkers
http://valet.webthing.com/link/
http://home.snafu.de/tilman/xenulink.html

Speed Tests
http://www.iwebtool.com/speed_test

Analysis Tools
http://www.websiteoptimization.com/services/analyze/
http://www.seocompany.ca/tool/web-site-statistics/

Brendan Timmons 5/4/2008

Page | 21
Resources
Links
http://www.usability.gov/
http://en.wikipedia.org/wiki/Usability
http://usability.com.au/
http://www.humanfactors.com/home/usability.asp
http://www.stcsig.org/usability/

Books

Gaffney, Gerry & Szuc, Daniel

The Usability Kit The Professional‟s Web Usability Kit

Brendan Timmons 5/4/2008

Page | 22
Index

A interface, 5, 6

Analysis, 2, 9, 10, 18
O
D objectives, 7, 9

data, 10, 11, 12, 14, 16

P
E persona, 11
Planning, 2, 8, 14
Evaluate, 2, 9
S
F
surveys, 10, 13
feedback, 10, 11
T
G
Test, 2, 14, 15
guideline, 13
Guidelines, 9
U
I Usability, 2, 4, 5, 7, 8, 10, 13,
14, 16, 19

Brendan Timmons 5/4/2008

Page | 23