How to create a great user experience?

HOW TO CREATE A GREAT
USER EXPERIENCE
21 April 2016

© Black Sun Plc 2016 www.blacksunplc.com
CONTENTS
2
WHAT IS USER EXPERIENCE?
The overall experience and
satisfaction a visitor has when
using your website

WHY DOES IT MATTER?
3
to form an opinion
of your website
50milliseconds
that’s half the blink
of an eye

WHAT AFFECTS THE FIRST IMPRESSION?
4
Design elements
Logo; images;
navigation; colour;
typeface
94%
Content
6%

> satisfaction
> time on site & repeat visits
Deeper understanding
THE BENEFITS
5

CONTENTS
6
WHAT ARE WE TRYING TO ACHIEVE?
A person of average ability and
experience can figure out how
to use your site to accomplish
something without it being
more trouble than it’s worth

THREE KEY SUCCESS FACTORS
7
EHow successfully a user is able to use the website
ffectiveness

8
E
E
ffectiveness
fficiency
How quickly a user is able to complete a task

9
E
E
E
ffectiveness
fficiency
njoyment
How good the user felt about the experience

• Compelling – draws me back
• Usable – effective and efficient
• Simple – quick and easy
• Useful – met my needs
THE DESIRED OUTCOME
10

• Mix of high web experience and novice users
• Incredibly time constrained, with attention split over many activities
• Want quick answers
• Don’t know your organisation, operations, jargon – and don’t care
• Expect consistency – how, when, where they interact with your
organisation
THE CHALLENGES: USERS
11

THE CHALLENGES: TECHNOLOGY
12
BROWSERS DEVICES & SCREEN
RESOLUTIONS
OPERATING SYSTEMS

THE CHALLENGES: RESOURCES
13
TIME MONEY FOCUS

THE CHALLENGES: PERSPECTIVES
14
“I want a lovely, swooshy,
beautiful design, pixel
perfect in every device”
“I need to be able to actually build
this in budget and in time – and
our organisation still uses IE8!”
THE DESIGNER
THE PROJECT MANAGER
“I can create some great effects
which will work brilliantly – just
not on every device/browser”
“I need to be able to
integrate this in the CMS and
enable people to edit it!”
THE DEVELOPER
THE PROGRAMMER

AND BEST OF ALL…..
15
There’s no right answer!!!

THE USER FRAMEWORK
16
Users
FEATURES
FUNCTIONALITY
DESIGN
USER EXPERIENCE!
tasks
that requires…
exposed through
presented through a
that will deliver a +ve
Expectations
Goals
YOUR WEBSITEInteract with
will have
achieved by
performing
that frame their

THE KEY ELEMENTS
17

THE KEY ELEMENTS
18

UX RUNS THROUGHOUT THE PROCESS
20
• Vision statement
• Objectives and KPI’s
• Audience needs analysis
• Desired digital experience
– look/feel/perceptions
• High level content
recommendations
• Sitemap
• Wireframes
• User journeys
• Functionality & features
• Detailed requirements
• Set up CMS
• Front end development
• Content production
• Feature build
• Integrate components
• Flow in content
• Host environment
• User testing testing
• Quality assurance
• Analytics integration
• Client acceptance tests
• Transition to live
Activities
VISION DOCUMENT
• Digital identity
• Creative proposition
• Interface designs
• Interactive features
• Design guide
USER REQUIREMENTS DESIGNS BETA RELEASE LAUNCH
Deliverables
1
DISCOVERY
of what to build
2
DEFINE
the user experience
3
DESIGN
a distinctive presence
4
DEVELOP
a quality solution
5
DEPLOY
QA and Launch

© Black Sun Plc 2016 www.blacksunplc.com21
• Define your objectives
• Analyse how people are currently using your site
• Discovering your user needs
DISCOVERY

Interviews
• Meet key users of the website and ask open, probing questions
You get
• Good insights into the users goals, motivations, perceptions,
behaviours and feelings
Advantages
• ‘Hard’ and ‘soft’ insights
• Makes the users feel important
Downside
• Can be time-consuming and difficult to get people to do it
DISCOVERING USER NEEDS

Surveys
• Using paper or online to ask questions of your audiences
You get
• Data from a wider group, with clear cut answers
Advantages
• Data from a wider group
• Cheaper
Downside
• Tends to be better for yes/no or scoring questions, weaker for
insights

Contextual studies
• Observing users first hand as they interact with your website
You get
• A good understanding of the whole experience from a customers
perspective, while using the site
Advantages
• Real observations, real situation
Downside
• More expensive and time consuming
• Need to ensure you have representative sample

What is a persona?
• A fictional person who represents a major user group of your website
• A persona focuses on their goals
How may personas are required?
• One to represent each of your specific user groups
What does a persona consist of?
• Name, job, function
• Their priorities/needs – content and features
• What we want them to think
CREATING PERSONAS

• Focuses the whole team on meeting the audience needs and goals
• Helps define the content priorities across the site
• Enables features and functionality to be identified and use cases to be
developed
• Drives the information architecture – site structure, content grouping
and so on
• Aids the design process
• Improves the testing process later in the project
WHY DO WE CREATE PERSONAS?

PERSONA EXAMPLE
Investors & Analysts:
Equity
What they will be looking for What we want them to think
• A solid investment proposition
evidenced through strong track
record and future strategic direction
• Strong share performance and value
against sector peer companies
• Balanced and sustainable
investment for the long term
• Consistent, reliable and transparent
source of information
Buy-side investors and
sell-side analysts.
Highly sophisticated
investors with strong
analytical capabilities
and access to financial
knowledge. Digitally
savvy.
Primary areas of interest
• Strategy and business
model underpinning the
investment case
• Geographic/business
breakdown
• Business structure and
legal entities
• Financial performance &
comparatives
• Business level information
• RNS announcements
• Key performance
indicators
• Consensus
• Archive of news, webcasts,
presentations & reports
• Credit ratings
• Financial calendar
• Annual Report
• IR contact details
Secondary areas of interest
• Risk management
• Subsidiary financial
information
• Company history
• Governance & executive
information
• Remuneration
• Factsheets
• Bios – IR Team/Exec
• Dividend information
• Balanced scorecard

CREATING THE SITEMAP
Home
Run a pub
Search
Site constants:
- Terms & conditions
- Privacy statements
- Accessibility statement
- Cookie information
- Contact us
Meet our people
Media
What’s right
for you?
Who we are
Our strategy
Our industry
Our Directors
Our publicans
Craft Union
Bermondsey
Pub Partners (L&T) Investment case
Share price tools
Results, reports &
presentations
Financial calendar
Convertible bonds
Contacts & advisors
Community
People
Publicans
Responsible
retailing
Environment
Learning &
Development
About us
Our history
Contacts
KPI’s
Alerts
Structure
Committees
AGM
Shareholder services
Dividends
FAQs
Investors
Financial
performance
Governance
Shareholder information
Regulatory news
Rewards &
benefits
Current
opportunities
Careers contacts
News
Key Facts
Media gallery
Media contacts
Expert Ventures
Prop Co
Our businesses
Unique investor reports
Work with us
Why Enterprise InnsOur Approach
Responsibility

WIREFRAMING THE SOLUTION

DEVELOPING THE DESIGN

CREATING THE DESIGN GUIDE

DEFINING THE USER EXPERIENCE
1. Site architecture
3. Navigation
2. Labels
4. Content

SITE
ARCHITECTURE

1. Driven by the user journeys and personas created
2. Use conventions – especially in corporate sites
3. Restrict depth of site to 3 levels after home page
– Home> section> secondary section> tertiary section
4. Have no more than 10 secondary sections in a section
5. Don’t worry about duplicating/cross linking key content
– IR contacts in IR section and ‘Contacts’ – people will access both from different
sources
DEFINING THE SITE ARCHITECTURE

EXAMPLE

LABELLING

TYPES OF LABELS
Icons
Page titles
Icons
Navigation
labels
Icons

1. Call things by their correct name
2. Remember spacing for mobile/tablet devices!
3. Be consistent across the site
4. Use terminology your users would use
5. For icons – design by all means – but use conventions!
PRINCIPLES OF GOOD LABELLING

EXAMPLES
Where would you go for the latest results presentation?

• Look at the printed pages of TalkTalk
• Review the homepage:
– Where would you expect clicking on the logo to take you?
– Is the read more button appropriate in all cases?
– Are all labels clear and unambiguous?
• Look at the Investors page, where would you go for:
– Latest results presentation?
– Board of Directors?
– Board Committees information
• Shareholder services
– Does this page help?
WORK SESSION 1

NAVIGATION

Navigation determines ‘Findability’
• The ability of users to navigate the pages of a site to discover and
retrieve the information they are looking for
Primary
• Guides user through the site
• Allows them to find the content they are looking for
• Avoids taking user down dead end
• Flexibility on the route they choose
And often forgotten…..
• It tells you where you currently are
• It tells us how to use the site
• It gives confidence in people who built the site
THE PURPOSE OF NAVIGATION

TYPES OF NAVIGATION
Contextual
Breadcrumb
Local
Global
Supplemental

OTHER ELEMENTS OF NAVIGATION
‘You are here’
indicators
Site Id Utilities
Page titles

1. Clear link indicators – remember tablets/mobiles have no rollovers
2. Avoid choosing a colour for links the same as non-linking titles
3. Clear rollover states when on desktop
4. Clear ‘you are here’ indicators – and more than just colour
5. Ideally show visited links
6. Distinguish link text from non-link text (i.e. colour or underline)
1. Avoid rollover bold as this can throw out spacing
7. Use meaningful links - avoid ‘click here’
8. Differentiate between ‘in-site’ links and external links
9. Other sites, pdf, documents should open in new tab
IMPLEMENTING BEST PRACTICE LINKS

EXAMPLES
Side navigation with icons Profile based navigation &
colours
Fully expanding navigation &
sticky nav.

1. Consistent with the desktop
experience
2. Stick to convention
3. Switch to hamburger only at iPad
portrait and below
– (unless a thin site)
4. Make it clear how you go to a
section or view sub-pages
5. Highlights the importance of clear
in-page navigation
AND MOBILE NAVIGATION?
47

• Look at the content page print off of your own site
• As quickly as you can identify and circle the following:
1. Site ID
2. Page name
3. Sections (i.e. primary navigation)
4. Local navigation (if any)
5. ‘You are here’ indicators and breadcrumb trail
6. Contextual (i.e. in-page) links
7. Search
• How easy was it? Were there any challenges?
• Would a brand new visitor to your site be able to do it?
WORK SESSION 2

4
9
CONTENT

Create visual hierarchies
• More important = more prominent
• Related things are related visually
• Nest/group elements to show what belongs with what
Break up pages into clearly defined areas
Make it obvious what’s clickable
CONTENT: VISUAL HIERARCHY

Format your text to aid the user
• Use plenty of headings
• Headings nearer the text they relate to
• Keep paragraphs short
• Use bulleted lists
• Highlight key terms
And remember….
• Omit pointless words
• If you need instructions the UX isn’t clear enough!
CONTENT: TEXT FORMAT

Look at your section and content pages
Ask yourself the following:
• Is the page ‘easy on the eye’?
• Is there a clear hierarchy?
• Is it clear what the most important element is?
• Do you want to read the content or is it daunting?
WORK SESSION 3

• Delivering a best-in-class user experience is challenging
• It requires a sophisticated blend of:
– Site architecture
– Labelling
– Navigation
– Content
– Look and feel
• And remember, digital is continually evolving…….
BRINGING IT ALL TOGETHER

BRINGING IT ALL TOGETHER

1. We can conduct a complimentary review of your
website from a usability perspective and give you
our top line advice and recommendations on any
improvements
2. We can extend this review to a ‘full paid’ for
assessment which includes a full user experience,
design and content analysis against a chosen peer
group
HOW WE CAN HELP

APPENDIX
ADDITIONAL READING MATERIALS

• V&A Blog on how small things get big results
http://www.vam.ac.uk/blog/digital-media/thinking-small-how-small-changes-can-get-big-results
• How users read the web
https://www.nngroup.com/articles/how-users-read-on-the-web/
• Top 3 IA questions about navigation menus
https://www.nngroup.com/articles/ia-questions-navigation-menus/
• Don’t Make Me Think Revisited by Steve Krug
GOOD UX RESOURCES

How to create a great user experience?

Recomendados

Recomendados

Más contenido relacionado

Similar a How to create a great user experience?

Similar a How to create a great user experience? (20)

Último

Último (20)

How to create a great user experience?