#UX101

Usability and User Experience 101

by Paul RoukeHead of Usability at PRWD

20th February 2010 @ MMU

Twitter Hashtag#UX101

#UX101

7 years experience focused on:

– improving ‘visitor >> purchaser’ conversion rates

– increasing average order values

– improving number of returning visitors

– converting offline shoppers to online shoppers

• The UK’s leading online and home shopping retailer• Annual sales of around £1.5 billion• Around 5 million customers

My backgroundJoined the very 1st e-commerce team in 1999 in design and usability role

#UX101

The Leading North West Usability and User Experience Consultancy

Provide services to help improve the performance of websites

•Usability testing•Expert evaluations•User-centered design•Usability training•Consultancy

Who is PRWD?

#UX101

PRWD Clients IncludePRWD clients include…

#UX101

Effectiveness – Can they reach their goalsfind what they are looking fordo what they want to do?

Efficiency – How fastnumber of errorsamount of effortnumber of steps?

Satisfaction – Was it a good/bad experience? Do it again? Recommend to others?

“The effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments”

ISO 13407 – User Centred Design Process for Interactive Systems

What is Usability and User Experience?What is usability and user experience?

#UX101

The good news

A more ‘usable’ website means you’ll get more bang for your marketing buck

• Google Adwords

• Search Engine Optimisation

• Social Media

• Email Marketing

• Affiliate Advertising

#UX101

#UX101 objective

Provide breathing space

#UX101

Characteristics of bad/poor websites

Tweet

#UX101 bad .......................

#UX101

Benefits of improving website usability

Tweet

#UX101 benefit .......................

#UX101

Still the most important page on your site • 49.7% of customers land on the home page of websites (DoubleClick)• It is the best place for you to outline your value proposition and show

what is within your website

5 main questions your homepage should answer• What site / company is this?• What do they have here?• What can I do here (what does the site offer)?• Where do I start?• Why should I be here – and not somewhere else?

Homepages

#UX10121st October 2010 Paul Rouke - Head of Usability at PRWD| 11

Clear primary navigation

Prominant link to primary tool

High visibility of useful information

Clearly defined structure for key services

Prominent calls to action

#UX101

#UX101 objective

Use free tools to test different ideas

#UX101

Consider answering these questions• Do we make our proposition clear? (especially useful for testing

new visitors)• Do our USP's have enough prominence amongst other elements

of the page?• Are visitors encouraged to click on our primary call to action?

(useful if your site currently has one primary objective and product to promote)

• Are we appropriately promoting our primary services that are the most profitable for our business?

More information on this approach can be seen on my Econsultancy article:http://econsultancy.com/blog/4512-take-five-seconds-to-test-your-call-to-action-and-usp

Homepages – First ImpressionsHomepages

#UX101

Clear primary navigation

Clear proposition

Prominent call to action

Credibility enhancement

Visual stimulus

#UX101| 15

Clear primary navigation

Clear proposition

Prominent call to action

Credibility enhancement

Visual stimulus

#UX101

Clear primary navigation

Clear proposition

Prominent call to action

Credibility enhancement

Visual stimulus

#UX101

TIP – don’t hide your USP’s

For micro businesses and SME’s, quickly establishing your USP’s & credibility is vital to compete with well known competitors

#UX101

Case study – don’t hide your USP’s

#UX101

Case study – don’t hide your USP’s

#UX101

Case study – don’t hide your USP’s

#UX101

#UX101 objective

Don’t hide your unique selling points

#UX101

2 main types • Existing internal pages of your website• Bespoke pages designed specifically for a marketing campaign

The same usability principles apply as with homepages• Make it clear what site / company this is• Outline the proposition• Make it clear what visitors should do next• Establish credibility with customer quotes or testimonials• Provide one primary call to action

Think who > what > why > lets do it

Landing pages

#UX101

Landing pages – bespoke

#UX101

#UX101 objective

Encourage visitors to enquire/purchase

#UX101

Landing pages – bespoke

Who

What

Why

Lets do it

#UX101

#UX101 objective

Ensure your primary call to action is clear

#UX101

Landing pages – existing internal pages

#UX101

5 main objectives of an existing landing page• Make it clear what site / company this is• Outline the proposition• Make it clear where visitors are within your website• Make content easy to scan• Provide one primary call to action

Landing pages – existing internal pages

#UX101

#UX101 objective

Answer the question – where am I?

#UX101

1

243

1 Prominent page title 2 Clarity of where you are 3 Simple, clean interface 4 Headings tailored to primary visitor requirements 5 Use of white space and formatting to aid scanability 6 Clear call to action and related options7 Cross selling to related products and services8 Option to use alternative communication to help answer visitor questions and concerns

6

57

8

Landing pages – existing internal pages

#UX101

#UX101 objective

Help visitors decide “where should I go next?”

#UX101

2 main types • Enquiry• Buy

Conversions

#UX101

Form Primary and Secondary ActionsFocussing the visitor on what you want

Use button size, style and colour to focus the user and increase conversions

#UX101

#UX101

#UX101

Online enquiry forms

Key ‘Principles’ we are taught

Keep them simple

Only ask for the minimum info required

People are busy, they don’t have time for big forms

#UX101

Which form will visitors most use?

#UX101

Which form do visitors most use?

14% 86%

#UX101

How well do these enquiries convert into sales?

#UX101

How well do these enquiries convert into sales?

17%

#UX101

How well do these enquiries convert into sales?

17% 55%

#UX101

• They can be long

• They can be complex

• They can give the visitor many choices

TIP – be careful of enquiry form myths

#UX101

#UX101 objective

Don’t hide your contact details

#UX101

TIP - Tailor your enquiry forms

Make it easier for visitors to specify what they are interested in by providing options on your enquiry forms

#UX101

Which test won?

Original version

#UX101

Which test won?

Test version A

#UX101

Which test won?

Original v Test version A - RESULTS

+ 9%

#UX101

Which test won?

Test version A – What and why

1. Make the required and optional information more obvious2. Remove the back button to encourage completion

#UX101

Which test won?

Test version A

#UX101

Which test won?

Test version B

#UX101

#UX101 objective

Answer key visitor questions

#UX101

Which test won?

Test version A v Test version B - RESULTS

+ 66%

#UX101

Which test won?

Test version B – What and why?

1. Remove branding to focus the visitor on completing the form

2. Provide support information as to the 2 different options for getting a quote

3. Answer visitor questions to encourage more requests for quotes

#UX101

#UX101 objective

Remove dead ends

#UX101

We all know how important it is to be considerate of what people want…

especially when buying presents…

…look what can happen when we’re not!

#UX101

#UX101

#UX101

#UX101 objective

Watch other people use your website

#UX101

Getting an understanding of how other people use your website is one of the most enlightening experiences you can have

There are 3 type of user testing, suitable for all budgets:

User testing

Guerrilla Remote Moderated

#UX101

#UX101

What is guerilla user testing?

FREESimple Enlightening

Delivers actionable results

#UX101

#UX101 objective

Fall in love with web analytics

(esp Goals)

#UX101

#UX101

What is remote user testing?

CheapSimple Enlightening

Delivers actionable results

#UX101

Try it for FREE with a PRWD partner:

Visit http://whatusersdo.comUse promo code UX101

1st 50 get one FREE test

#UX101

What is moderated user testing?

In-depthComprehensive Important for larger brands

Delivers actionable results

#UX101

Moderated Testing in Manchester with MMU

> MMU are a PRWD partner> Fully featured testing lab> Suitable for websites, games and mobile

#UX101

#UX101

#UX101 objective

Don’t make people think

#UX101

#UX101

#UX101 takeouts

Good usability and user experience isn’t just for

the big boys

#UX101

#UX101 takeouts

If you don’t measure what you do, you don’t know if

its working

#UX101

#UX101 takeouts

There is no magic formula – you need to understand

what your users want

#UX101

Connect with me

http://uk.linkedin.com/in/paulrouke

Office:0161 228 0585

Mobile:07739 745 126

Email:paulrouke @ prwd.co.uk

Web:http://www.prwd.co.uk

PRWD22 Lever StreetManchesterM1 1EA

http://twitter.com/paulrouke

#UX101

Customer Acquisition

First Impression

Search for info or service

Act upon info or service

Slow page load

Poor look and feel

Confusing jargon, topic organisation

Inflexible search

Poor search results

Privacy & security concerns

Unreadable content

Clumsy site navigation

% o

f sit

e

vis

itors

100%

0%

Forms errors

Why we leave websites

#UX101

Thankyou for coming along to

“Usability & User Experience 101” by Paul Rouke

Slides, resources & best practice available here:

http://blog.prwd.co.uk/usability/UX101