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

50 milliseconds

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

E How 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 WEBSITE Interact with

will have

achieved by performing

that frame their


THE KEY ELEMENTS

17

http://www.google.co.uk/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjX8NnkwojMAhWFVRoKHRgHD7EQjRwIBw&url=http://ux.stackexchange.com/questions/43796/what-is-ux-strategy&psig=AFQjCNHMuMB9ba9eawAo_GGzhr2ozy9MUw&ust=1460530578889286


THE KEY ELEMENTS

18

http://www.google.co.uk/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjX8NnkwojMAhWFVRoKHRgHD7EQjRwIBw&url=http://ux.stackexchange.com/questions/43796/what-is-ux-strategy&psig=AFQjCNHMuMB9ba9eawAo_GGzhr2ozy9MUw&ust=1460530578889286

SO HOW DO WE DO IT?


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.com 21

• 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 Inns Our 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.

https://www.qualcomm.com/

http://www.clinigengroup.com/

http://www.independent.co.uk/


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


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

EXAMPLES: HIERARCHY


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

https://www.nationaltrust.org.uk/

http://mace.world/

https://www.croptrust.org/2014/home

http://www.lear.com/


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

http://www.vam.ac.uk/blog/digital-media/thinking-small-how-small-changes-can-get-big-results

https://www.nngroup.com/articles/how-users-read-on-the-web/

https://www.nngroup.com/articles/ia-questions-navigation-menus/