Usability Testing

[client name] Business Health Care

 Contents:
• Executive Summary 3

 Key Positives 4
 Areas for improvement 5
• Methodology 6
 Why we tested 7
 Who we tested 8
 How we tested 9
• Results 12
 Homepage: The first 10 seconds 13
 Homepage in general 17
 Homepage: What users want to see 18
 Homepage: Quick wins 19
 Site Navigation: left hand navigation 20
 Other Site Navigation: Quick wins 22
 Building a healthcare plan page: Quick wins 23
 Product building: 25
 Hub page optimisation: Quick wins 31
 Your Users: 34
 Example Persona: 36

• Conclusions 37

• Prioritised recommendations 40

• Appendices 41
 About Bunnyfoot 42
 Introduction to User Centred Design (UCD) 43
 Eyetracking: How it works 44
 Consultant details 47

2
 Executive Summary:

3
 Executive Summary: Key Positives
The [client name] branding carries weight:
• It makes users confident
• This buys you time to hook the user into investigating the product

Good use of colour

• This creates the impression that the site won‟t be dry and uninteresting

Good use of graphical elements

• The user interprets these as calls to action and functional elements prompting them to
mine down for utilities, tools or assistance

Creation of a visual tool representing the steps to product creation

• Visual tools such as this, when designed and implemented correctly save users time and
anxiety by providing a conceptual overview of what is possible and/or required on the site

4
 Executive Summary: Areas for Improvement
1. The product’s modular build process is
counter intuitive with redundant stages
and an overcomplicated decision tree
2. The graphical representation of the
Impact on user experience/ROI/Other metric

step-by-step process fails the user

through over complicated titles and
supporting text
3. The site’s information architecture does
not mirror the step changes introduced
to the user via the graphical
representation
4. The products modules and options are
not offered in summary, being only
accessible via unique pages
5. There is not sufficient signposting
within pages.
6. Copywriting is far too excessive,
expansive and is sometimes considered
patronising
7. No high order summary of the product
is offered on the homepage
8. Users do not have access to costs, their
primary motivator for choice
9. The site does not provide sufficiently
express that the product has a simplest
(read cheapest) form

Ease of Implementation
5
 Methodology:

6
 Methodology: Why we tested
The research questions presented by [client name]...

Study Aims:
Concept level:
• Is the modular build concept understood
• Do uses realise see the calls to action (Call us & Call back)

Home page:
• 10 second test gauging first impressions of home page
• Are all the site possibilities transmitted by the homepage
• Test effectiveness of different link types and page structure

Navigation:
• Do users intuitively respond to the business healthcare navigation
• Does the use of graphics, terminology and content support the modular build concept?

General goals:
• Identify „quick wins‟; these are changes that have significant positive impact on the user experience yet
are quick and low cost to implement
• Identify how effective the current content is at explaining the new products, and where it can be improved
• Overall review of participants navigational usage to complete relevant and appropriate tasks
• To investigate overall user satisfaction of the business healthcare pages

7
 Methodology: Who we tested
The participants were recruited for their appropriate demographic profiles .

Recruitment Criteria:
6 participants
50% company owners with 2-10 staff
50% company owners with 20-100 staff
No current customers of [client name]
Interested in purchasing/finding out about staff healthcare products
Ultimate responsibility for staff benefits
Mix of genders and ages

Participant overview:
We met the recruitment targets with no outliers

8
 Methodology: How we tested
Users were asked to perform representative tasks on a test-bed site. Eye
tracking technology was used to record the users gaze for later analysis and
provide insight into the users interactions with the site. Sessions lasted approx
1 hour...
• The PEEP testing methodology was initially employed. This protocol is usually
applied to systems at a late stage of development

*Procedure in detail: Post Experience Eyetracked Protocol (PEEP)

Participants‟ eyetracking was recorded as they used the site to complete the above tasks as they would do
normally. When they had finished a task, their eyetracking was played back to them. During this time they were
asked to talk through what they were thinking as they used the site, any problems or difficulties that arose and any
recommendations for change. This allowed us to observe how users naturally interacted with the site.

• This was substituted for the Think-aloud protocol when it became apparent that at a
concept level, the site was unable to support independent user interaction

*Procedure in detail: Think Aloud User Testing

Participants‟ eye tracking was recorded as they used the site to complete the above tasks. During this time they
were asked to talk through what they were thinking as they used the site, any problems or difficulties that arose
and any recommendations for change. This allowed us to observe how users interacted and obtain immediate
feedback.

9
 Methodology: Analysing Hot Spots
Eyetracking allows us to record where Homepage heat map
the users‟ eye moves around the page
and where it stops. When the eye stops,
we call this a “fixation”. A map of fixations
like the one shown here is called a “Heat
map”; areas of intense fixations are
referred to as “Hotspots”.
This heat map shows large numbers of
fixations as red areas through to no
fixations as a dark grey (black with
transparency).
All users fixation data is combined to
generate composite images

10
 Methodology: Analysing Gaze Plots
Eyetracking also allows us to record the order in
which the users‟ eye moves around the page and Homepage gaze plot
where it stops. Here fixations are recorded by
number. The size of the containing circle
represents the length of the fixation
Gaze plots are generated for each individual user.
The order and length of fixation allow us insight
into the users analysis of the page. Things to note
are:
•What attracts the most attention
 The design of some elements can steer the users gaze in
less useful directions

•Is there constant re-referral to one screen element?

 Are the users unsure of an elements relative importance?
 If the logo receives repeated fixations the user may be
uncertain as to site purpose

•Are there many or few fixations?

 Many fixations may represent a user looking for context,
relevance or navigational cues

•Do users look at page elements in a logical order?

 Does the page guide the eye in a structured way?

All these are important for IA as the user must be

initiated quickly into the site navigational principles

11
 Results:
• We are aware that the global navigation is out of scope for this research
• However the global navigation and left hand navigation caused users considerable
issues
• Global navigation issues are therefore highlighted in order to provide the context in
which critical user errors occurred

12
 Homepage: 1
The first 10 seconds (1)
Homepage 10 second heat map
An effective website should
transmit the nature of its content
and range of possibilities within the
first five to ten seconds. This
essential exchange between site
and user can be hampered by
deviation from design conventions,
overload of content or poor
differentiation of content and
functionality.

The Good!
The [client name] logo is studied and
recognised
The tabbed [client name] 1st tier links
are working effectively. Users
recognise they are in the healthcare
domain.
The graphical calls to action are
immediately identified as links to
functionality.

13
 Homepage: 2
The Bad!
The first 10 seconds (2)
Issue 1:

Homepage 10 second heat map 5 out of 6 users were unable to

Issue 3:
The Left Hand Navigation (LHN) draws no attention.
Users need to orientate themselves via LHN
Recommendation 3:
Create a graphically stronger LHN
accurately recall whether this was for
business or personal health care cover.
This is due to 2nd tier links not following
the tabbed format. There is therefore
the suggestion that the Global
Healthcare options (Personal,
Business, Switching etc...) may be the
1st tier navigation the Business
Healthcare pages...
Recommendation 1:
Create a clear and prominent page title
and redesign the global navigation
Issue 2:
No user was able to describe the
nature of the product as the text is
expansive, undifferentiated and lacking
concrete statements...
Recommendation 2:
Remove 70% of the copy. Condense
information into bullets and hero
statements.

14
 Homepage: 3 Here we see a typical
The first 10 seconds (3) gaze plot of the first 10
seconds...
Screen shot
Larger fixations suggest user
extracting meaning. This occurs
around emboldened text...

Small fixations suggest difficulty

selecting pertinent information.
This occurs around the
breadcrumbs and page title...

User tries to locate this page in

the grand scheme of [client name]
navigation...

The graphic s attract attention.

These suggest functionality and
are a successful call to action

This user has found it difficult to orientate herself within

the Global Site architecture. This has resulted in no time
for the products main features be asserted...

15
 Video 1:
10 second homepage view

16
 Homepage: 3 Your homepage fails users...
Homepage in general There is significant confusion as to what is
being offered here...
Screen shot Key to the success of every home or hub
page is the clear communication of the
possibilities of the site in general and next
tier of pages e.g.
“We offer a modular product that is
“responsive to your business needs”
The attention span of users is very short
therefore you need to provide short,
choppy hero statements e.g.
„x years healthcare insurance experience‟
„Highly competitive pricing‟
„Unique offering‟
This mimics how web users read
paragraphs; they read the first few words
and if there is nothing attractive or
personally relevant they move to the next
Issue 1: paragraph.
In a whole minute of page viewing users to not refer to the Furthermore, if you are offering a step-by-
LHN in order to establish what is possible. step process advertise it here. An effective
visual representation of this will deliver this
They are still trying to establish the nature of the offerings complex concept
from the top of the main content area.

They do however see the graphical element as an invite into

the system and use that as their point of departure from the
17 homepage
 Homepage: 4
What users want to see…
Screen shot
• Hero Statements
• High order delivery of product
specification
• Market performance
• Links to examples
• Product scope e.g. It‟s simplest and
most complex form
• Representative images or graphics
• Costs
• Clear navigation
• Clear next steps in main content Homepage 1 minute heat map

• Opportunity to contact a person

18
 Homepage: 5
Quick wins…
• Reduce copy by half – More signal, less noise Screen shot
• Let the user know that this is a guide EARLY...
“These pages are a guide only, allowing you to
explore the product before you contact a [client
name] representative”
• Summarise...
“[client name] „s highly flexible business healthcare
package is simple to create and responsive to your
particular business needs whether you have 5 or
5000 employees ...”
• Introduce hero statements
• Put the process graphic on the homepage
• Let users know that while this is a bespoke product,
they don‟t have to choose all the components
“...as simple or as tailored as you like”
• Bringing the process graphic onto the homepage
allows you to remove a tier of the LHN and the how to
build a plan „call to action‟ on the right hand side
• Get the most important messages above the page
load. It‟s ok to have a homepage longer that page load
as long as the stuff below is of lesser utility
• Redesign then show the page to colleagues... Give
them 10 seconds to pull the key messages and
features.

19
 Site Navigation: Left Hand Navigation
Quick Wins...
The LHN causes much confusion in
the eyes of users...
Consider „Business Healthcare home‟...

„Define member‟, „Categories‟ etc are all conceptual

components of Build a health care plan. As such
they should appear as sub-steps within „Build a
healthcare plan‟ or remove the „Build a health care
plan‟ page altogether listing each step sequentially
under „Business Healthcare Home‟......
This should also be reflected in the IA of these
pages also. See later slides...
Below „build a plan‟ should appear all the peripheral
information such as „request a call back‟ ,
„downloads‟ and any other information that is
supportive such as T&C...
Other than the above recommendations there is no
way to rescue the LHN and make it graphically and
conceptually coherent without departing from the
design scope for this research...
It is noticed that this is an [client name] U.K wide
issue.

20
 Video 2:
Issues with left hand navigation

21
 Other Site Navigation:
Quick wins...
Screen shot
Breadcrumbs... When users want to
relocate to the [product name] front
end they may inadvertently end up
at the [client name] homepage.
Consider replacing with clearer
signposting within page. See later
slides.
The „How to build a plan icon‟ was
often seen as an escape route when
a user became disorientated.
If the homepage and „Build a
healthcare plan page are combined,
rename to „step by step overview‟
and use your pop-up overview
diagram
Ensure that the call to action icons
remain static throughout the site

22
 ‘Building a healthcare plan’ page:
Quick wins...
This is a redundant step. The
essential information here
Screen shot should appear on the [client
name] homepage...
The diagram is too complex
and too large...
Users responded badly to the
mouse-over effect so get high
order summary of step (stage)
differences on each graphic...
Use a site wide link convention
to let users know they can click
on each of the coloured units
e.g. >>
Simplify titles. Let users know
that there are additional
options on the hub pages (see
later slides)...
Users misinterpret
„complimentary‟ to mean free.
Reword e.g.
“Core Healthcare
optional add-ons”

23
 Video 3:
Issues with building a healthcare plan

24
 Product building: 1
Screen shot This graphical
representation is far too
complex...
Users expect a step by step process
with development at each stage.
This does not happen.
There are considerable if/or and/or
decisions to be made that create an
impression of complexity where
there is none...
The step descriptions are over
complicated causing the roll over
text to be de-contextualised...
The tool suggests additional
„preventative benefits‟ when users
are unaware that any have yet to be
selected...
Step 5 further confuses them with
another oblique statement.

25
 Product building: 2 Screen shot
What users want to see...
Screen element • A linear process that is easy to assimilate...
• A brief unit description (very useful for later)
• Grouping of the category specific and category general steps
• Clear Step-by-step progression with tangible development at each stage...

The need to repeat steps for each

category is implicit within „for each
Screen element Screen element category‟ statements...

This is a catch all step so should happen

early

Announce you have 4 main modules and

introduce concept of additional options for
Screen element the core module

This is a parallel option and should not

affect the major 4 step process

26
 Product building: 3

Process flow is interrupted...

Screen shot
Issue:
Steps 4 and 5 appear on the same page.
This interrupts what users consider to be a
natural step per page work flow
Recommendation:
Ensure one step per page
Issue:
Users were confused by this step as they
believed that they had already built in
flexibility by selecting components and add-
ons...
Recommendation:
Consider including this as a step but
renaming to something like
“Reduce premiums”

?
27
 Product building 4
Critical error...
The translation of this product from Screen shot
brochure ware to web has not been
effective...

In a brochure there is a linear, page to page

process that dictates the delivery order of
information

Hyper-linking creates a different , hierarchal

navigation strategy in the minds of users...

This hierarchal navigation creates an

expectation that procedural steps move
between comparable process steps...

The IA on this site (particularly the LHN and

links at the bottom of each „stage‟ page)
forces the user to mirror a linear process
by taking them sequentially through pages
including any in depth detail...

Users became lost almost immediately and

developed a highly erroneous
understanding of the product e.g.
Thinking that the Dental module was a
subcomponent of the Core module.

28
 Video 4:
Lost in the navigation...
no significant rehearsal effect advantage after 20 minutes

29
 Product building: 5
Recommendation...
The LHN is not supporting
users in moving between Screen shot
steps...
One solution is to recycle the process
map and make it a visual reference to
their position within the system...

The simplified process map and the

unit headers can then be recycled and
placed on step hub-pages as a visual
reference to where the user is in the
process...

This would in effect do the job that the

LHN is not doing at present; giving the
user an intuitive escape route to return
to an earlier step or indeed move to the
next step.

This would also allow for a significantly

cleaned up LHN as many of the options
within each step hub page can be dealt
with discreetly within that hub page
without making reference to these
options within LHN. See next slide for
details...

30
 Hub page optimisation: 1
Quick Wins...
• Within this product site, the page that users land on when they click on each step are essentially
hub pages for all the options within that step...
• The rule of thumb for hub page optimisation is similar to that of homepage optimisation...
• Each page must have a high order summary of all the possibilities within that silo...
• This summary must be sufficient for those site visitors who only require high order information or
have no interest in developing that stage of the process with options or add-on‟s. See later for
information about supporting different personas..
• There must also be provided clear progression to the next stage and retreat to the previous stage.
Graphical buttons are again a good idea...
• There is a next page button but this causes the user to mine down within the section rather than
between the steps as the user expects. This will not be necessary if the high order summaries of
each step sub component is represented and an option to mine down is provided...
• Essentially, the user should be able to arrive at a high level understanding of the product in only
as many pages as there are steps, the progression through these steps clearly accessible via
each hub page...

Next Step

Previous
Step
31
 Video 5:
The need for summaries at hub page level

32
 Hub page optimisation: 2
Recommendation...
Wire frame mock up of design
recommendations made by Bunnyfoot
33
Clear Title and brief description
of what is possible within this
silo...
Each module has a high order
summary...
Those personas who „read‟
can mine down into each
module for detailed
information...
Clear signposting
Visual guide to location within
in the process
From the detail page a clear
„back‟ button should be
provided that returns the user
to the summary hub page.
 Your users: 1
Identifying the needs of personas
• Your key audience (primary persona) reacted badly to this site
• There were four primary reasons for this
 They are busy – they want a quick summarised route through the
product
 They want costs
 They became mired in the IA
 They expected an online process

• This is likely due to not identifying your audience dynamic through

persona creation. This is a vital part of the user centred design
(UCD) process
• We have likely identified some or the particulars of your primary
persona (see next slide)
• You will have secondary personas; perhaps with a more methodical
and studied approach

34
 Your users: 2
Behavioural aspects of your primary persona
A persona is a design tool that is created from site analytics, market research and any other
information source at your disposal. Personas stay with the design team for the length of the
build and allow all internal stakeholders to have a focal point for all content decisions...
• Busy
• Abrupt
• Cost orientated
• They require summaries
• They are intolerant of expansive copy
• They require justifications that approximate a business case report
• They want to see the most basic option quickly
• They want case studies
• They interpret over simplified, lengthy of over familiar copywriting as patronising
• They want to make a high order decision then pass on to administrative staff to finalise
details
• Any annoyance will result in moving to a competitors product

35
Example persona:
Small technology business owner > 30 staff > looking to expand

Customer Profile Values

John Stevens, 41, lives in Leeds
 Flexibility
Goal  Efficiency
To need to recruit the best of the best,
 Keep cost low
Emotional Motivation  Excellence of staff
My competitors always seem to get the cream of graduates and I
worry that my clients will pick up on this. I need a sweetener! “I want to become the
pre-eminent provider of
Rational Motivation technology solutions in
Better benefits will allow me to attract better staff the North”

 Triggers  Tasks + approach  Criteria  Frustrations + fears

 Existing staff moving to  Gets administrative staff to  Cost effectiveness  Hidden costs
competitors look on the internet for  Responsiveness of product  It won‟t be enough to attract
 Graduates not being attracted comparable products  Flexible payment options the right staff
to his company  Does not want to offer all  Complex products
employees the same
benefits
 Expects a 3 page
presentation of product
comparisons and costs
 Wants to make a decision
the same day
 Will choose the most basic
option
 Conclusions:

37
 Conclusions: 1… Findings in general
At the beginning of this research we intended to use a test protocol designed for pre-release sites…
This protocol requires the user to complete tasks independently and without interruption from the facilitator…
This had to be abandoned anywhere from three to five minutes into the site tasks because the users were
unable to generate a mental model of the product and map that onto the site navigation…
This is likely a side-effect of faithfully mapping the brochure ware onto the web; two mediums with exceptionally
different navigation strategies associated with them…

Further problems are being introduced by the global and left hand navigation. By far the greatest
complication is the formatting of the left hand navigation. Without changing this, user orientation upon page
load is hampered and progression through the build procedure becomes counter intuitive

We highly recommend deviating from the paper presentation of the product, reworking the process to
streamline, suit web use and support the users mental model…

At present this site does not support your primary persona., yet your primary persona should dictate what
form all your web offerings should take , most importantly level of information presented at the head of each
silo and the supporting copy…
All this needs to be done in a way that does not alienate your secondary personas…

38
 Conclusions: 2… Next steps
We recommend implementing all the „within scope‟ changes in this report and entering into a discussion with
all relevant parties about reviewing the [client name] global navigation

Furthermore we recommend the creation of personas for all existing and new web developments…

Users were highly frustrated that no actual functionality is available on the site…
It is understood that online functionality will be implemented in the future, and this will significantly improve and
differentiate the experience on your site from competitor sites.
If the quote tool is developed independently of these supporting pages, much of the site tested will be rendered
redundant or outmoded.
Incorporating the new quote tool into the existing framework will inevitably lead to usability issues that will affect
conversions through your site.
However many of the high priority issues identified in this research, such as improved mapping of the products
modular build, could inform the dynamics of the future quote tool…
This is an excellent argument for using this research as a launch platform for a 2nd round user centred design
project.
By extending the scope of the proposed (and currently independent) „quote tool‟ research, any
recommendations made in this research can be implemented simultaneously with the development of the
quote tool.
The next phase of research would then be able to responsively deliver a competitive and highly usable online
quote tool that is tightly integrated with the supporting information.

39
 Prioritised recommendations
Area Recommendation Return on Investment These are the 29
1 Process Simplify process 1. Imperative recommendations that
Tier information from Product summary on homepage to „component‟ summary would most drastically
2 Process on hub page to detailed information below that 1. Imperative improve the user
3 Process Hub pages links to next step rather than mining down 1. Imperative experience...
4 Process Diagram Simplify process diagram 1. Imperative
These recommendations
5 Site Wide Cut copy drastically 1. Imperative
bar recommendation 11
6 Users Create personas 1. Imperative
are within the scope for
7 Homepage Create clear and prominent page titles 2. High change...
8 Homepage Create bulleted summary of the products main features 2. High
The 6 „Imperative‟
9 Homepage Use simplified process map on homepage 2. High
recommendations involve
10 Hub pages Remove link that mines into silo content 2. High
a considerable investment
11 LHN Create a graphically stronger left hand navigation 2. High
of time and resources and
12 LHN Reword for conceptually stronger left hand navigation 2. High would be necessary to
13 LHN Reorder to mirror a simplified process 2. High implement before this site
14 Process Create summarising hub pages 2. High could be said to be „user
15 Process Create mini-map as a visual aide 2. High centric‟...
16 Process Diagram Use simpler titles and summarise silo contents 2. High
The „high‟
17 Process Diagram Add 'Building flexibility' step 2. High recommendation are more
18 Product Supply accessible costing 2. High achievable but again
19 Product Supply examples 2. High represent a considerable
20 Users Use the behavioural aspects identified in this report to inform homepage design 2. High investment of time.
21 Breadcrumbs Removing breadcrumbs to simplify page navigation 3. Medium
22 Homepage Create hero statements 3. Medium
23 Hub pages Create graphic for next and previous step 3. Medium
24 LHN Include secondary links such as Contact us etc... 3. Medium
25 LHN Rename 'Business healthcare' to 'Business healthcare home' 3. Medium
26 Process Ensure one step per page 3. Medium
27 Process Rename 'Building flexibility' step 3. Medium
28 Process Diagram Rename 'Complimentary' 3. Medium
29 Site Wide Removing 'Build a healthcare plan' page 3. Medium
40
 Appendices:

41
 About Bunnyfoot
• Bunnyfoot are a behavioural research consultancy who focus
on creating the right user experience
• Our core services include:
 A full range of user centred design services
 User testing – including specialist eyetracking services
 Accessibility services – including audits, user testing, education
and outreach and development of guidance and policy materials
• Founded in 1999, we have 15 full time consultants - with
backgrounds in psychology, design, communication and
technology
• We operate out of 3 offices in Oxford, London & Edinburgh
• We have 6 dedicated usability labs and our testing equipment
is fully portable allowing us the flexibility of performing testing
in the field

42
 Introduction to user centred design
• User centred design is an established process that delivers successful
websites by involving your target audience throughout the whole
development process
• We call it persuasion centred design to emphasise the fact that our approach
is about getting the user to act and feel how you want them to by considering
your aims and business needs
• The full process contains a set of activities that fit into the following 4 stages:

1
2
3
4

43
 Eyetracking: How it works…
• Our eyetracker uses a high-resolution camera to capture images of the user‟s eyes.
• The eyetracker shines safely low levels of infrared light onto the user‟s face and
reflects patterns from the cornea
• This marks three points on each eye to calculate gaze location. One mark is a dark
spot where the pupil is and the other two are reflections on the cornea for each
infrared light.

camera
Pupil marked
as a dark spot

Reflections on
Infrared light the cornea

44
 Tools… Tobii 1750 Eye Tracker
• A high resolution state of the art
device
• Non intrusive
• Real time recording of participant
gaze
• Simultaneous capture of
participant face and all audio
• All capture streams rendered into
one video file for analysis
• Ideal for recording users‟
eyetracking whilst interacting with
websites

45
 Tools… Tobii Clear View
Analysis software for Eye Tracking data

Renders Heat Maps that describe

participant gaze fixations…

Renders Gaze plots that describe the

order of fixations…

46
 Aaron Young
aaron@bunnyfoot.com
+44 (0)845 644 0650

www.bunnyfoot.com

47