Usability Review: TreatHIV.com

1
Usability Review TreatHIV.com
Commercial Solutions User Centered
Design GlaxoSmithKline November 2005
2
Usability Review TreatHIV.com
Objectives

• Usability review of the TreatHIV.com
• Design heuristics (rules of thumb)
• Evaluation of the site with respect to the tasks
  supported
• Review the site with respect to user groups
• Physicians treating HIV patients
• Patients with HIV
• Tasks
• Find Information / answers to their questions

3
Usability Review TreatHIV.com
Method

• Understand user needs business goals
• frequent tasks / questions
• Review
• navigation and information architecture for easy
  access to and logical flow through information
• detailed design elements including layout,
  controls, content, consistency

4
Usability Review TreatHIV.com
Executive Summary

• Purpose and offerings are not clear
• The site is a launch-pad to information and other
  sites
• Its easy to lose users before they explore what
  you have to offer
• Its unclear what types of information are
  available in this kind of site, the value-add is
  in the organization of information, not
  necessarily the content (since that is housed
  elsewhere)
• The site hierarchy is not always consistent or
  clear
• Global groupings launch other sites
• High level sections have good reason to be there?
• A combination of audience division and
  information types makes the site model difficult
  to understand

5
Usability Review Information Architecture
Using Audience as a means to structure
information can make users, particularly medical
patients, feel ill-at-ease What are you telling
the doctors that you wont tell me? Consider
alternate ways to label or consolidate
information. Review this subject in usability
sessions.
Slide Kits might also be considered a part of the
info for HCPsis there a strong reason to promote
to the structure of the site? This content does
not appear to add a lot of value to any lay
person. Does it need to be persistent?
The site structure seems to include other sites.
How do these outside sites fit into what TreatHIV
has to offer? Consider groups of information that
might include these sites.
These additional major sections are both links to
other sites, but look like part of this site
this contributes to confusing the purpose of
TreatHIV.com. Consider promoting these as
sub-sections of major categories of this
site/service.
6
Usability Review Navigation
Navigation

• The navigational model of the site is not clear
• Navigation elements lack clear hierarchical
  treatment
• Lack of you-are-here cues within the navigation
  can lose users
• Unexpected results can disorient users or lose
  users to another site
• The sites primary navigation is too broad and
  shallow
• Overcomplicates navigation
• Delays value to the user

7
Usability Review Navigation
Search is buried and is not persistently
available to users. Since searching is a primary
way of mining for information, consider promoting
the search box and making it persistent.
8
Usability Review Navigation
Basic Navigation lacks hierarchy and affordance.
While these boxes do seem to imply the buckets
of information for the site, they are not
consistently organized, there is no way to easily
understand their relationship with one another.
One might expect that these brown buttons would
be sub-sections or secondary navigation but they
are not. Consider carefully the coloring,
similarity, and placement of navigational
elements. To create quick links to particular
information, consider alternative treatments in
the body of the page instead of grouping with
primary navigation.

• It is not possible to tell which part of the site
  is being viewed.
• Include a button for each section of the site
  where a user can find information.
• When a user is on a page, highlight the
  appropriate section

There is no home tab. Users need a failsafe
way to return to the home page.
9
Usability Review Navigation
Graphic emphasis in the middle and bottom of the
page detract from the sites primary navigation.
Drawing users into highlighted information is a
key function of information-rich sites, but
primary navigation is competing with, if not
totally surpassed by, the body of the page.
Sites and images within the body of the page have
a much stronger graphic treatment than the
primary navigation. While primary navigation
should not be overwhelming, understanding where
he is and where he can go is important to any
users successful experience. Consider stronger
graphic emphasis of the navigation bar.
10
Usability Review Navigation
Navigation cues lack diversity where it could be
helpful. Some things that look similar have
different results. Differentiate types of
information by placement or graphic treatment.
Similar buttons have different results, with some
of these main navigational buttons taking the
user away from TreatHIV.com.
These sections look like highlighted information
within the site. Two launch other sites, two are
shortcuts to other areas of TreatHIV.com. Similar
graphics cue users to a similar result.
Differentiate navigational cues.
11
Usability Review Navigation
A combination of menu-driven and basic navigation
may be overcomplicated. When using Menus, a
sub-section must be selected in order to deliver
value to the user.
Because the menu selection is not forced, its
possible for a user to land on this page that
only repeats the menu. When using menus, force
selection and find a way to clearly feed back to
the user which selection they have made, e.g.
with a clear page header.
Breadcrumbs are too small and may not be
illuminating to the user. The same thing could be
accomplished by highlighting the navigation bar
with a graphic cue to the users position within
the site. This is more widely recognized than
breadcrumbs.
This text seems to be a placeholder for
content-rich information. Users are frustrated
by navigating to places where there is nothing
new. This page only repeats the menu choice they
did not make. When using secondary navigation,
it is helpful to keep it persistently on the page
and default to the first topic so that not only
do users have a sense of where they are, but of
value being delivered up front.
There is nothing to illuminate what lies behind
these choices. With the real estate, new
information might highlight what users can expect
to get from these links.
12
Usability Review Navigation
Primary navigation sends users away from
TreatHIV.com. On a resource site, its expected
that youre linking users to other information
sources, but the navigation should reflect the
model of the site youre using.
Primary navigation sends users to other sites and
replaces TreatHIV.com within the browser. This
not only can disorient users, but it removes the
possibility that theyll continue exploring your
site. Only include pages within TreatHIV.com in
the primary navigation.
13
Usability Review Navigation
Navigation to outside resources is inconsistent.
Some links launch new browsers while others
replace TreatHIV.com. This creates confusion
because users dont know what to expect or where
they are. Consistency helps users to learn and
navigate, but also to trust your site.
These link to new sites within the browser.
Replacing content means the user may have
unknowingly have left your site.
When launching new resources, consider launching
them in a new browser window OR within a
framework that is still TreatHIV.com (e.g.
hotmail, staples.com business partners). Be
consistent.
These link to new sites in a new browser window.
Users are free to explore there, but when they
close out, they will need to make an explicit
decision about closing TreatHIV.com as well.
14
Usability Review Navigation
Navigation terminology does not inform users.
Links seem to be either too vague or too specific
to be meaningful to a general audience. This may
be alienating as well as confusing.
What types of things are grouped under Info?
These groups of information are the only sections
of the site with more content behind them what
the user can expect to find is unclear.
These links go directly to a specific place, but
the usefulness/meaning is unclear. Users want
to have some idea of how the site is structured
and what they can expect to glean from each
section. These specific resources may better be
called out as highlighted links, as opposed to in
the major navigation. That way, a short
description can illuminate why to go and whether
the user can expect to have access.
15
Usability Review Navigation
Navigation within the Educational Info has
multiple issues. Perhaps the simplest and most
effective way to navigate within a document is to
use anchor links at the top of the page.
The title of the document is linked when Im
already looking at the document. What would
happen if I clicked here? Giving the user the
feedback that they got what theyve asked for
(clicked on) is important, but this should be a
plain text header.

• Left navigation has multiple issues that add up
  to a difficult model.
• Navigation to sections of the document requires
  hitting a very small target with the mouse.
• It is not possible to see which section Im
  looking at without comparing titles
• Navigation text is small and light-colored
• Some of these links are anchor links and others
  go to a new page
• Its not obvious without reading that this is a
  container for the document
• If the online model of the brochures is
  maintained, consider simplifying with anchor
  links and allowing users to scroll the entire
  document in one HTML page.

16
Usability Review Navigation
Glossary has no navigation other than scrolling.
Typically an alphabet of anchor links allows
users to jump to the area they want.
There is no easy way to traverse the glossary and
find what the user is looking for. A glossary by
nature is a tool people use to find a definition
of a term they have in mind. There is no way to
tell how long the glossary list is nor to
navigate it. Consider anchor links.
17
Usability Review TreatHIV.com
Detailed Design

• Content
• Heuristics
• Principles of design based on how people learn
  and process information
• Layout
• Consistency
• with industry standards and strong human factors
  principles
• within the site, which strengthens trust in the
  site
• Task flow

18
Usability Review Content
Purpose is not immediately clear. What is the
site offering? Give users a taste immediately to
draw them in and keep them engaged.
Purpose is stated but not graphically important
or reflected in the content of the page. Resource
for whom? Consider how you can bubble up
resources to the top.
Images can draw users in, but a big block of text
will be overlooked . Consider whether you could
use this space to promote resources. Are the
images important to the TreatHIV.com site? Would
other images serve better to differentiate this
site from another?
Empty sections leave the impression of incomplete
information or a site under construction.
Consider another way to link to Spanish versions
of information.
Without clear buckets of information or a strong
theme, the home page doesnt deliver a sense of
what a user will gain by visiting this site.
Consider how this site is different from others,
its purpose, the information users are seeking.
19
Usability Review Content
Lack of clear language can cause confusion or
mistrust of the site. Cut extraneous text, be
consistent, and say what you mean.
Speaking Tour about what? For whom? By whom?
Title your links/headers in such a way that they
are clear and draw users in, e.g. Magic Speaks
These two labels lead to the MagicAndHIV.com
site. Is there a legitimate reason to repeat?
Because they are labeled differently, its
implied these go to different places.
Whats New on TreatHIV versus News which is
it? Whats New usually implies new features to
the site. Be consistent in calling this News.
This link adds no clarification. Nothing new is
offered. Consider promoting the latest news
article or linking the header. Where is the
more link here?
More works best when used in a preview list (e.g.
news headlines). In all these blocks, no content
has really been offered, so more is not
accurate and not needed. Consider simply linking
to the resource.
Click here is redundant. Links should be
obvious to users, eliminating a need for click
here. Eliminating this phrase allows users to
get to the meat of whats being offered faster.
20
Usability Review Content
These statements seem vague and almost random
because there is no context. Consider relating
GSKs leadership to the logos/drugs by providing
a simple introduction, e.g. GSK leads the way
with treatments like If they are clearly
clickable, users will know they can find out
more. Perhaps highlight the main types of
information found on each drug site as a teaser.

• How do I know which drug to pick? Consider both
• grouping the drugs by type, and
• giving some information about each up front in
  the form of a few bullet points
• These cues will help users to identify which
  drugs may interest them and increases the
  likelihood that theyll be able to keep looking
  till they find the one they want.

It is unclear what the difference is between
Prescribing Information and Complete Prescribing
Information. Prescribing Information doesnt
really go anywhere, its an anchor link to scroll
the page slightly. Unlink this header (was this a
review mandate?).
21
Usability Review Content
Long lists without grouping hinder users ability
to find what they want quickly. Identify the
way(s) users will group or look for information
and reflect that within the site.
Good Grouping links into related chunks of
information helps users scan the page and narrow
in on what they want faster.
Without groupings, users have to read each link.
Group links, product links, resources when there
are more than a few listed on the same page.
Not all groupings seem meaningful, e.g. Key
Links and Community Resources. Ensure that
groups have clear, meaningful titles to enable
users to hit the right area of the site quickly.
22
Usability Review Content
How do users know that a link will help answer
their questions or meet their needs? Groupings
will help as well as brief explanations. This
will increase the scent of what the user is
seeking and will otherwise keep them looking on
TreatHIV instead of losing them to another site.

• Whats behind each link?
• Briefs statements illuminate the value the site
  will provide
• Separating members-only sites will be helpful
  finding out that you have to log in when you get
  there is frustrating it doesnt apply.

23
Usability Review Content
PDF / HTML and Spanish / English versions create
confusion. Consider how the information will be
used is it important for information to appear
on the same page? Is it important to have both
HTML and PDF versions?
The header links to the PDF, so users are lead
away from the site. At that point, users are
blocked from navigating anywhere else on the
site, which would be the advantage to the HTML
pages. IF HCPs would be coming in to download
printable versions for distribution, consider
unlinking the heading so users make a conscious
choice about whether they view PDF or HTML.
Similar icons mean different things the key
information seems to be English/Spanish but the
icons reflect the PDF/HTML page type. Consider
creating a column for English/Spanish and then
allowing the choice of HTML/PDF.
Selecting PDF/HTML is an unexpected choice. The
HTML icon may not be well-recognized.
Additionally, users are not accustomed to having
to decide this they may not understand what the
option is or why they would choose one over the
other.
24
Usability Review Readability
Text on the site can be difficult to read or
scan. Help users by increasing text size to a
minimum of 10pt font, using title case, and
ensuring good contrast.
Using all capital letters makes words difficult
to scan. For headers and navigation it is
particularly important to be easy to read. Help
users by using title case.
Very small text is difficult to read, especially
when presented in a different colour as in
navigation, breadcrumbs. Use a minimum of 10pt
font. Black text is best.
Use of title case headers and a larger font size
make scanning and reading much easier.
White text on a dark background is difficult to
read, even more difficult on a light background.
This issue is heightened when using small, plain
text. The best of these examples is the bold
white on medium blue background. Better would be
a darker blue. Best is dark text on a light
background.
25
Usability Review Layout
Headings lack consistency and visual hierarchy.
Create a consistent visual grammar for different
levels of headings.
This major heading is visually lesser than the
page sub-heading. An appropriate visual hierarchy
helps users to understand and predict the
structure of what they are looking at, as well as
to model the structure of the site.
Headers and links are not treated consistently on
each page. Consistency not only contributes to
users understanding of the site and how it
works, but create an impression of a trustworthy,
professional site.
26
Usability Review Layout
Tables employ different conventions in displaying
their contents. While these tables display
slightly different types and amounts of
information, more similar conventions could be
used on headers and column lines to create a
continuity of look/feel within the site.
27
Usability Review Layout
Long narrow column may not be the best use of
space for resources. Depending on resolution
constraints, it may provide value to use two
columns in a more portal-like display so users
can scan more at-a-glance.
28
Usability Review TreatHIV.com
Recommendations

• Restructure content
• Clear, distinct paths and topics
• Concise, poignant titles
• Use grouping methods that direct your audience to
  answer their most frequent questions
• Group related information in one place
• Revamp the home page to provide value-add up
  front and keep users on the site
• Clean up Navigation
• Ensure clear affordance
• Be consistent with elements that link to other
  information
• Consider Layout
• Create a clear, consistent visual grammar for
  headings, links, etc.

29
Usability Review TreatHIV.com
Next Steps UCD Services

• New Design Development
• Understand brand goals and strategies as they
  should be reflected in the site
• Who is this site really targeted toward and what
  do they want to do?
• Create Wireframes exposing a proposed navigation
  structure
• Create Prototypes as needed in formative testing
• Formative Usability Testing
• Iteration on design