Transcript Public Sector Usability

5 Usability steps to get more out of
your website
Chris Rourke
March 2011
Who are User Vision?
2
User Vision is an Edinburgh & London based User Experience Consultancy, with clients,
including:
 BBC
 Directgov
 English Heritage
 Scottish Enterprise
 Transport Scotland
 NHS & NHS Scotland
 Scottish Government
 Department of Health
 Student Loan Company
 Learning Teaching Scotland
 Government of Abu Dhabi
 Army, Navy & Royal Marines
 Central Office of Information
 many universities (e.g. Dundee, Sheffield, RGU)
 many local authorities (e.g. Fife, Aberdeenshire, Leeds)
Copyright User Vision 2011
What does User Vision do?
We test real users, bringing their experiences of usability and accessibility issues into
your development process, and so improve the User Experience
3
Work Across
Unmediated
Platforms
To Improve the
User Experience
To Improve
User Centred
Skills
To Improve
User
Insight
To Improve
Accessibility
Internet
Usability Testing
Training
Focus Groups
Accessibility
Testing
Intranet
User Experience
Evaluation
Content
Guidelines
User Profiling
Accessibility
Audit
Desktop
Application
Software
Information
Architecture
Design
Writing
Guidelines
Longitudinal
Diary Studies
Mobiles & PDAs
Eye Tracking
Analysis
User Centred
Design
Consultancy
User Case
Analysis
Interactive TV
Trust &
Emotional
Assessments
Physical
Products
Wireframe
Designs
5 Steps to a more usable website
1. Get personal
2. Sort our your navigation
3. Search for a good experience
4. Form it right
5. Test it out
4
Copyright User Vision 2011
What is Usability?
The effectiveness, efficiency and satisfaction with which specified users
achieve specified goals in specified environments
ISO DIS 13407 “Human Centred Design for Interactive Systems
 Effectiveness | Can the user reach their goals?
 Efficiency
| How fast, number of steps, number of errors?
 Satisfaction
| Was it a good experience? Would they do it again?
Recommend it to others?
 Learnability
 Trust & Security
5
Copyright User Vision 2011
The User, Content and Context
Context determines
Type & Form of
Content
Context sets
Constraints
& Expectations
Users Do Task
Content Provides
Experience
6
Copyright User Vision 2011
The usability tug of war
There can be a tension between designs that are “beautiful ”, usable, or to be
optimized for SEO
So who should win?
It is the users who ‘use’ your site, who choose to
complete a purchase, make return visits and
recommend your site
 Users will appreciate a site that looks good
 They will be more likely to visit a site that can be easily found
 But they won’t come back to a site they can’t use
 And they won’t recommend a site they didn't enjoy using
7
Copyright User Vision 2011
Public Sector Usability Benefits
 Reduced Service Delivery Cost
 Lower administration costs
through self-service
 More return visits
 Lower administration costs
through less contact
 Fewer barriers to services
 Lower administration costs
through less complaints
 Channel migration to lowercost channels
 Shared Services opportunity
8
 Better Service Take-Up
Copyright User Vision 2011
 Better conversion rates
 More effective marketing &
viral marketing
 Improved Customer Service
 Improved trust
 Quicker service delivery
Public Sector’s Web Goals (Context)
What do you want to
achieve from your
website?
Offer shared
services with
other public
bodies or
intermediaries
Promote
regulation
enforcement &
standards
compliance
Resolve incidents
with the basic
clerical work done
by customer
9
Get customers to
respond to
marketing
campaigns
Answer query
without customer
contacting you
Your
Business
Goal
Give money:
benefits and
grants, with the
basic clerical work
done by customer
Collect money:
tax, fees and
fines, with the
basic clerical work
done by customer
Maintain regular
contact with
specific target
groups
Provide services
with the basic
clerical work done
by customer
Achieve wider
public and civic
engagement
Your User’s Web Goals (User)
What do your users
want to achieve –
these ought to map
together!
Ignore
organisational
boundaries, with
help from
intermediaries
Not get into
trouble with the
regulations
Get Information
without fuss
Change behaviour
that has a
personal benefit
Customer’s
Goal
Complain about
service failures
Apply for services
directly without
fuss
Have an influence
on decisions
Get grants and
benefits entitled
too
10
Find out what is
going on
Pay (the right)
Fees and Dues
Fulfilling those two goals (Content)
How can your users
get what you want to
give them?
Problem-focused
with deep linking,
shared IAs, nonorganisational
sites
Well designed
information
offering carrot
and stick
Web forms &
business process
integration
11
Integration with
Marketing effort
& appropriate
content
Well designed
Information
How the
Web can
Match the
Two
Web forms &
business process
integration
Web forms with
Payment &
business process
integration
Push out
information via
Twitter, RSS,
Blogs, Email
Alerts,
Newsletters
Web forms &
business process
integration
Social Media such
as RSS, Forums,
Polls, Surveys,
User Content and
Tagging
Typical barriers to a good user experience
100%
Slow page load
Accessibility problems
Homepage doesn’t sell
company well
% of site visitors
Poor look
and feel
0%
12
Poorly designed
navigation
Confusing jargon
Lack of information /
product detail / images
Unreadable content
Can’t filter or sort results
Lack of trust
Unclear error messages
Mandatory registration
No clear call to action
Annoyance at
shipping costs
Content doesn’t sell the product
Privacy & security concerns
Poorly designed forms
First Impression
Copyright User Vision 2011
On
Product search /
browsing
to our 5 Steps….
Commit to
purchase
Continue with
purchase
1. Get Personal
You know all about your organisational context
You know all about your organisation’s content
Knowing your users, and keeping their needs in mind is more difficult. A
solution is to Profile your users.
 You may be able to use some customer insight work already done
 You may rely on generalised profiles
 You may create specific personas
13
Copyright User Vision 2011
Generalised User Types
Characteristics
Browsers
Hunters
Buyers
Those that aren’t really
Know what they are
Know exactly what they
sure what they are
looking for but they
are looking for and want
looking for, but are on
want to compare and
to find and buy it as
the site for inspiration
contrast them to make
quickly as possible
sure they are getting the
best one for their needs
Mindset while
browsing
14
“I know I’d like to get my “One of those new
“I want to get the Kodak
partner a fun gadgety
digital picture frames
Easyshare EX1011
type gift – what do they
would be great – but
because it has wifi, a big
have?”
which one, they vary a
screen, shows video too,
lot in size, price,
and had the best
memory functions etc”
reviews”
User Profile Example
A site with an older audience might think about:
15
Characteristics
Description
Design Implications
Personal / physical
characteristics
Job profile
Most over 50 years, many will have visual Larger text, easy to change text size,
or other physical disabilities. 50% male / support screen readers, assistive
50% female
technology, text to background contrast,
avoid flashing animations
Retired
Education
Various
Style preferences
Most are new to the web, and many are
not comfortable with it.
Consider metaphors that are familiar to
them (newspapers), clear layout and use
familiar, large fonts
Concerns
Security over the internet, especially in
shopping. Looking foolish and making
mistakes on the web.
Wants
Easy access to other people of their
generation, information on relevant
events. A pleasant experience on the
web, which many of them find daunting.
Easy steps in transactions & registration,
reinforce security message, offer other
channels for payment than web, contextual
help support, friendly error messages
Links to pensioner groups, discussion area,
news on elderly issues? Others…
User profiles and demographic data is interesting – but
can it help us picture them?
User Profiling: Personas
What is a persona?
 A fictional person who represents a
major user group for your site.
 A persona focuses on user goals
Personas take these customer profiles
and give them a:
 After ethnographic studies &
interviews
 Online surveys
 name
 Focus groups
 face
 Usability testing
 life
 personality to individual people in
each of these groups
16
How do we develop personas? By
analyzing what you learned about your
users from user research, e.g.
Methods for creating personas
A broad process:
17
1.
Start with Market Segments, identify common attributes
2.
Get samples of these people get to know them better through research
3.
Digest data
4.
Present (and modify where necessary) the personas with business
stakeholders – this co-design will gain buy in to this process and use of
the resulting personas.
5.
Create 4-6 personas (question granularity if more or less)
Copyright User Vision 2011
Sources of information to build personas
Watching – ethnographic / contextual analysis approach e.g. stores
Surveys
Customer Insight material
Analytics and Call Centre stats
Interview sample of actual customers
 Either as part of other testing
 Together in a focus group or depth interview
Interview Internal Client Customer-facing Resources
 Call centre / front office staff, CSRs, store staff
 Marketing staff
18
Copyright User Vision 2011
Developing a Persona
Fill out your Persona by asking them questions:
 Do they have time to …
 Do they have the money to …
 Do they have the skill to…
 What would stop them / turn them off
 What would encourage them / help them
 Who are they doing this for
 How motivated are they
 What do they hate
 What do they love
 … whatever is a pertinent question for the client / service /product
19
Copyright User Vision 2011
Consider the distinguishing characteristics
Persona 3
Never shops online
Frequently shops
online
No internet access
Constant internet
access
Low income
Low IT skills
20
Persona 2 Persona 1
High income
Developed IT skills
Infrequent flyer
Frequent flyer
More short-haul
More lon-haul
Copyright User Vision 2011
Persona Presentation
Picture (to help attach to persona)
Name (to help attach to persona)
Motto (Positive / Negative) (persona in a nutshell)
Personal Goals (Hedonic and/or Pragmatic)
Narrative (Back Story showing Demographics, Psycho-demographics, Geographics and
Behavioural Traits)
1.
2.
3.
4.
Round the Persona into a fuller person
Behaviour traits that indicate how to respond
Likely Use Cases / Questions
User Journey
1.
2.
3.
4.
21
Barriers to remove
Approach (Personal Style)
Influencers (Pros)
Main Pain Points & Frustrations (Cons)
1.
2.
3.
4.
1.
2.
3.
4.
1.
2.
3.
4.
Key Words / Referrer (How get here)
Entry Point (Where land)
Reasons to Return / Subscribe
Presentation styles
22
2. Sort out your Navigation
Being unable to find content is the
most common complain on large
sites
Navigation labels are the stepping
stones leading people to content
Card sorting – a simple but powerful
way to develop your information
architecture based on the mindset
of your users
Its easy, fun & can be done early
23
Copyright User Vision 2011
Card Sorting - IA testing
 Separate your site’s content components
onto cards
 Have users sort cards into piles of things that
go together
 The piles do not need to contain the same
number of cards.
 Provide names for the groups.
 You can create a hierarchy of 2 levels
Motor Vehicles
Cars
Nissan Micra
Vauxhall Vectra
24
Ford
Mondeo User Vision 2011
Copyright
Vans
Ford Transit
Motorcycles
Suzuki Bandit
Yamaha Diversion
Evidence gathered from card sorting
Typical useful outputs include
 Tree diagram
 Content affinity charts
Information can be gathered through
other means
 Categorisation (reverse card
sorting) studies
25
Copyright User Vision 2011
Be Multi-faceted
 Expected for e-commerce
 Lets user “play by their own rules”
creating customised navigation by
combining facets
 Can show the user how many items in
each facet combo
Tips
 Reasonable number of facets
 Research users to create taxonomy
 Order facets & values by importance
 Facets must be well defined, mutually
exclusive & clearly labelled
26
 Good examples: Asos.com, Endless.com
Copyright User Vision 2011
3. Search your search
 The larger the site – the more likely people are to use search
 Expectations are rising
 Google Instant
 Site search refinement
 Most on-site search is far worse than Google
 Tips:
 Use your search query logs
 Make spell checker flexible
 Give an abstract for each result
 Ensure page titles are unique
 Consider Query Relaxation
 Consider “best bets”
27
Copyright User Vision 2011
Search query logs
 Valuable source of information about your users
 Site Search Analytics to fine tune your search experience
 What are most common queries?
 For these are the results ones user should see?
 Which common queries get zero results
 Which common queries retrieve results that don’t get clicked through?
 Which result is most frequently clicked through common query
 Can you use this information to:
 Promote selected content on your home / landing pages
 Manually alter the order in the results page
 Provide “best bets”
28
Copyright User Vision 2011
Site Search Engines: Query Relaxation
If no results, need to re-do
my search again, try different
criteria.
29
Copyright User Vision 2011
Site Search Engines: Query Relaxation
If no results,
query
relaxation
allows me to
choose options
slightly outside
my original
search.
www.newzealand.com.
30
Copyright User Vision 2011
Site Search Engines: behind the scenes
Broader
term
Employing
people
Hierarchical
Variant term
Equivalence
Employment
legislation
Preferred
term
Equivalence
Employment
law
Variant
term
Work
regulations
Hierarchical
Associative
Related
term
Industrial
tribunals
31
Associative
Narrower Terms
Disability discrimination laws,
dismissal & notice periods,
employee rights, working
hours, equal opportunities …
Copyright User Vision 2011
Related
term
Wage Board
Communications industries
UF: Video recording industry
UF: Printing industry
UF: Publishing industry
UF: Sound recording industry
UF: Telecommunications industry
BT: Business sectors
RT: Music
RT: Advertising
RT: Media and the press
RT: Visual arts
RT: e-Commerce
RT: Films and film making
RT: Electronics industry
RT: Information and communication
technology
RT: Internet
RT: Postal services
RT: Telephone services
RT: Printing and copying services
From IPSV
UF = Used For, BT = Broader Term,
RT = Related Term, NT = Narrower
Term
4. Improve your Forms
 Forms can be barriers to service delivery and transactions
 Key is to remove the barriers while increasing confidence and the
persuasion of the process
 Tips
 Distinguish primary & secondary action buttons
 Use logical borders for sections of forms
 Progress indicators
 Allow flexibility (go back, cancel)
 Consider inline validation, instructions
 Review error messages
32
Copyright User Vision 2011
Forms: Primary & Secondary Actions
Provide a single primary path to
completion with secondary options
Clearly distinguish between primary and
secondary actions
 Different button styles
 Use buttons and links
33
Primary action stands
No Clear Primary action out
Copyright User Vision 2011
Forms: Inline formatting and validation
Inline help text is
automatically
shown as people engage
with input fields
Best for questions with
potentially high error
rates
Validate answers inline
after they have finished
providing an answer
34
Copyright User Vision 2011
Errors
Make sure errors are
 Polite
 Clear
 Formatted correctly on page
 Don’t let them be written by the tech
testing team!
35
Copyright User Vision 2011
Usability testing - part of the UCD process
Usability is an approach to product development that incorporates
direct user feedback throughout the development cycle in order to
reduce costs and create products and tools that meet user needs.”
Usability Professional’s Association
Usability Testing
36
Copyright User Vision 2011
Usability testing - its not just for the lab anymore
“People will gladly waste a million dollars on their fancy design and not spend $4000 to
see if it works”
Jakob Nielsen
Lab-based testing
37
Paper prototype testing
Remote moderated testing
Eye tracking
Being remote
Large
Online Survey
True Intent &
Remote
unmoderated
usability testing
Sample Size
Focus Group
Usability Lab
Small
Remote card
sorting
Full User Experience
(attitudes & behaviour)
Market Research
(attitudes)
Research type
Remote unmoderated
testing & True Intent
Remote category
testing
38
A/B Split and Multivariate Testing
Test multiple areas of a web page with multiple variations of
content for each area
39
Courtesy of Maxymiser
A/B Split and Multivariate Testing
Several tools exist for helping in
this research:
 Google website optimiser
 Maxymiser
 Omniture
Goal is to identify marginal
improvements in
“conversions” – people staying
on the happy path
Courtesy of Maxymiser
40
Copyright User Vision 2011
And finally…..Top Usability Pitfalls
1. Bolt-on Usability (We had to have the
site up, so thought we would test it
for usability (and accessibility) later)
2. We have no usability budget
3. Focus on the technology
4. Focus on the business
5. Assuming that the web designers will
take care of it all
6. KPIs and Project Success Criteria do
not include usability measures
7. Confusion on who the users are
(public, patients, service users,
customers, clients, citizens, residents,
businesses, other public sector
organisations)
8. Feature-based design rather than a
User Task-based design
9. Inconsistency
10. Senior Managers not seeing the web
as vital to the success of the organisation
41
Thank You
For further information, please contact Chris Rourke
User Vision
55 North Castle Street
Edinburgh
EH2 3QA
Tel:
Email:
Web:
Blog:
Twitter:
42
0131 225 0850
[email protected]
www.uservision.co.uk
www.uservisionblog.co.uk
www.twitter.com/uservision