how to create a great user experience - black · pdf filewhat is user experience? ......
TRANSCRIPT
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
© Black Sun Plc 2016 www.blacksunplc.com
WHY DOES IT MATTER?
3
to form an opinion of your website
50 milliseconds
that’s half the blink of an eye
© Black Sun Plc 2016 www.blacksunplc.com
WHAT AFFECTS THE FIRST IMPRESSION?
4
Design elements
Logo; images; navigation; colour;
typeface
94% Content
6%
© Black Sun Plc 2016 www.blacksunplc.com
> satisfaction
> time on site & repeat visits
Deeper understanding
THE BENEFITS
5
© Black Sun Plc 2016 www.blacksunplc.com
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
© Black Sun Plc 2016 www.blacksunplc.com
THREE KEY SUCCESS FACTORS
7
E How successfully a user is able to use the website
ffectiveness
© Black Sun Plc 2016 www.blacksunplc.com
THREE KEY SUCCESS FACTORS
8
E E
ffectiveness
fficiency How quickly a user is able to complete a task
© Black Sun Plc 2016 www.blacksunplc.com
THREE KEY SUCCESS FACTORS
9
E E E
ffectiveness
fficiency
njoyment How good the user felt about the experience
© Black Sun Plc 2016 www.blacksunplc.com
• Compelling – draws me back
• Usable – effective and efficient
• Simple – quick and easy
• Useful – met my needs
THE DESIRED OUTCOME
10
© Black Sun Plc 2016 www.blacksunplc.com
• 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
© Black Sun Plc 2016 www.blacksunplc.com
THE CHALLENGES: TECHNOLOGY
12
BROWSERS DEVICES & SCREEN RESOLUTIONS
OPERATING SYSTEMS
© Black Sun Plc 2016 www.blacksunplc.com
THE CHALLENGES: RESOURCES
13
TIME MONEY FOCUS
© Black Sun Plc 2016 www.blacksunplc.com
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
© Black Sun Plc 2016 www.blacksunplc.com
AND BEST OF ALL…..
15
There’s no right answer!!!
© Black Sun Plc 2016 www.blacksunplc.com
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
© Black Sun Plc 2016 www.blacksunplc.com
THE KEY ELEMENTS
17
© Black Sun Plc 2016 www.blacksunplc.com
THE KEY ELEMENTS
18
SO HOW DO WE DO IT?
© Black Sun Plc 2016 www.blacksunplc.com
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
© Black Sun Plc 2016 www.blacksunplc.com 22
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
© Black Sun Plc 2016 www.blacksunplc.com 23
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
DISCOVERING USER NEEDS
© Black Sun Plc 2016 www.blacksunplc.com 24
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
DISCOVERING USER NEEDS
© Black Sun Plc 2016 www.blacksunplc.com 25
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
© Black Sun Plc 2016 www.blacksunplc.com 26
• 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?
© Black Sun Plc 2016 www.blacksunplc.com 27
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
© Black Sun Plc 2016 www.blacksunplc.com 28
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
© Black Sun Plc 2016 www.blacksunplc.com 29
WIREFRAMING THE SOLUTION
© Black Sun Plc 2016 www.blacksunplc.com 30
DEVELOPING THE DESIGN
© Black Sun Plc 2016 www.blacksunplc.com 31
CREATING THE DESIGN GUIDE
© Black Sun Plc 2016 www.blacksunplc.com 32
DEFINING THE USER EXPERIENCE
1. Site architecture
3. Navigation
2. Labels
4. Content
© Black Sun Plc 2016 www.blacksunplc.com
SITE ARCHITECTURE
© Black Sun Plc 2016 www.blacksunplc.com 34
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
© Black Sun Plc 2016 www.blacksunplc.com 35
EXAMPLE
© Black Sun Plc 2016 www.blacksunplc.com
LABELLING
© Black Sun Plc 2016 www.blacksunplc.com 37
TYPES OF LABELS
Icons Page titles
Icons
Navigation labels
Icons
© Black Sun Plc 2016 www.blacksunplc.com 38
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
© Black Sun Plc 2016 www.blacksunplc.com 39
EXAMPLES
Where would you go for the latest results presentation?
© Black Sun Plc 2016 www.blacksunplc.com 40
• 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
© Black Sun Plc 2016 www.blacksunplc.com
NAVIGATION
© Black Sun Plc 2016 www.blacksunplc.com 42
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
© Black Sun Plc 2016 www.blacksunplc.com 43
TYPES OF NAVIGATION
Contextual
Breadcrumb
Local
Global
Supplemental
© Black Sun Plc 2016 www.blacksunplc.com 44
OTHER ELEMENTS OF NAVIGATION
‘You are here’ indicators
Site Id Utilities
Page titles
© Black Sun Plc 2016 www.blacksunplc.com 45
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
© Black Sun Plc 2016 www.blacksunplc.com 46
EXAMPLES
Side navigation with icons Profile based navigation & colours
Fully expanding navigation & sticky nav.
© Black Sun Plc 2016 www.blacksunplc.com
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
© Black Sun Plc 2016 www.blacksunplc.com 48
• 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
© Black Sun Plc 2016 www.blacksunplc.com 49
CONTENT
© Black Sun Plc 2016 www.blacksunplc.com 50
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
© Black Sun Plc 2016 www.blacksunplc.com 51
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
EXAMPLES: HIERARCHY
© Black Sun Plc 2016 www.blacksunplc.com 54
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
© Black Sun Plc 2016 www.blacksunplc.com 55
• 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
© Black Sun Plc 2016 www.blacksunplc.com 56
BRINGING IT ALL TOGETHER
© Black Sun Plc 2016 www.blacksunplc.com 57
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
© Black Sun Plc 2016 www.blacksunplc.com 59
• 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