Usability & User Experience 101 - #UX101

1. Usability and User Experience 101 by Paul Rouke Head of Usability at PRWD 20 th February 2010 @ MMU Twitter Hashtag #UX101

2. 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 <ul><li>The UK’s leading online and home shopping retailer </li></ul><ul><li>Annual sales of around £1.5 billion </li></ul><ul><li>Around 5 million customers </li></ul>My background Joined the very 1st e-commerce team in 1999 in design and usability role

3. <ul><li>The Leading North West Usability and User Experience Consultancy </li></ul><ul><li>Provide services to help improve the performance of websites </li></ul><ul><ul><li>Usability testing </li></ul></ul><ul><ul><li>Expert evaluations </li></ul></ul><ul><ul><li>User-centered design </li></ul></ul><ul><ul><li>Usability training </li></ul></ul><ul><ul><li>Consultancy </li></ul></ul>Who is PRWD?

4. PRWD Clients Include PRWD clients include…

5. <ul><ul><li>Effectiveness – Can they reach their goals </li></ul></ul><ul><ul><ul><li>find what they are looking for </li></ul></ul></ul><ul><ul><ul><li>do what they want to do? </li></ul></ul></ul><ul><ul><li>Efficiency – How fast </li></ul></ul><ul><ul><ul><li>number of errors </li></ul></ul></ul><ul><ul><ul><li>amount of effort </li></ul></ul></ul><ul><ul><ul><li>number of steps? </li></ul></ul></ul><ul><ul><li>Satisfaction – Was it a good/bad experience? </li></ul></ul><ul><ul><ul><li>Do it again? </li></ul></ul></ul><ul><ul><ul><li>Recommend to others? </li></ul></ul></ul>“ 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?

6. The good news <ul><li>A more ‘usable’ website means you’ll get more bang for your marketing buck </li></ul><ul><li>Google Adwords </li></ul><ul><li>Search Engine Optimisation </li></ul><ul><li>Social Media </li></ul><ul><li>Email Marketing </li></ul><ul><li>Affiliate Advertising </li></ul>

7. <ul><li>#UX101 objective </li></ul>Provide breathing space

8. Characteristics of bad/poor websites Tweet #UX101 bad .......................

9. Benefits of improving website usability Tweet #UX101 benefit .......................

10. <ul><li>Still the most important page on your site </li></ul><ul><ul><li>49.7% of customers land on the home page of websites (DoubleClick) </li></ul></ul><ul><ul><li>It is the best place for you to outline your value proposition and show what is within your website </li></ul></ul><ul><li>5 main questions your homepage should answer </li></ul><ul><ul><li>What site / company is this? </li></ul></ul><ul><ul><li>What do they have here? </li></ul></ul><ul><ul><li>What can I do here (what does the site offer)? </li></ul></ul><ul><ul><li>Where do I start? </li></ul></ul><ul><ul><li>Why should I be here – and not somewhere else? </li></ul></ul>Homepages

11. 21st October 2010 Paul Rouke - Head of Usability at PRWD | Clear primary navigation Prominant link to primary tool High visibility of useful information Clearly defined structure for key services Prominent calls to action

12. <ul><li>#UX101 objective </li></ul>Use free tools to test different ideas

13. <ul><li>Consider answering these questions </li></ul><ul><ul><li>Do we make our proposition clear? (especially useful for testing new visitors) </li></ul></ul><ul><ul><li>Do our USP's have enough prominence amongst other elements of the page? </li></ul></ul><ul><ul><li>Are visitors encouraged to click on our primary call to action? (useful if your site currently has one primary objective and product to promote) </li></ul></ul><ul><ul><li>Are we appropriately promoting our primary services that are the most profitable for our business? </li></ul></ul><ul><ul><li>More information on this approach can be seen on my Econsultancy article: </li></ul></ul><ul><ul><li>http://econsultancy.com/blog/4512-take-five-seconds-to-test-your-call-to-action-and-usp </li></ul></ul>Homepages – First Impressions Homepages

14. Clear primary navigation Clear proposition Prominent call to action Credibility enhancement Visual stimulus

15. | Clear primary navigation Clear proposition Prominent call to action Credibility enhancement Visual stimulus

16. Clear primary navigation Clear proposition Prominent call to action Credibility enhancement Visual stimulus

17. 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

18. Case study – don’t hide your USP’s

21. <ul><li>#UX101 objective </li></ul>Don’t hide your unique selling points

22. <ul><li>2 main types </li></ul><ul><ul><li>Existing internal pages of your website </li></ul></ul><ul><ul><li>Bespoke pages designed specifically for a marketing campaign </li></ul></ul><ul><li>The same usability principles apply as with homepages </li></ul><ul><ul><li>Make it clear what site / company this is </li></ul></ul><ul><ul><li>Outline the proposition </li></ul></ul><ul><ul><li>Make it clear what visitors should do next </li></ul></ul><ul><ul><li>Establish credibility with customer quotes or testimonials </li></ul></ul><ul><ul><li>Provide one primary call to action </li></ul></ul><ul><ul><li>Think who > what > why > lets do it </li></ul></ul>Landing pages

23. Landing pages – bespoke

24. <ul><li>#UX101 objective </li></ul>Encourage visitors to enquire/purchase

25. Landing pages – bespoke Who What Why Lets do it

26. <ul><li>#UX101 objective </li></ul>Ensure your primary call to action is clear

27. Landing pages – existing internal pages

28. <ul><ul><li>5 main objectives of an existing landing page </li></ul></ul><ul><ul><li>Make it clear what site / company this is </li></ul></ul><ul><ul><li>Outline the proposition </li></ul></ul><ul><ul><li>Make it clear where visitors are within your website </li></ul></ul><ul><ul><li>Make content easy to scan </li></ul></ul><ul><ul><li>Provide one primary call to action </li></ul></ul>Landing pages – existing internal pages

29. <ul><li>#UX101 objective </li></ul>Answer the question – where am I?

30. <ul><li>Prominent page title </li></ul><ul><li>Clarity of where you are </li></ul><ul><li>Simple, clean interface </li></ul><ul><li>Headings tailored to primary visitor requirements </li></ul><ul><li>Use of white space and formatting to aid scanability </li></ul><ul><li>Clear call to action and related options </li></ul><ul><li>Cross selling to related products and services </li></ul><ul><li>8 Option to use alternative communication to help answer visitor questions and concerns </li></ul>Landing pages – existing internal pages 1 2 4 3 6 5 7 8

31. <ul><li>#UX101 objective </li></ul>Help visitors decide “where should I go next?”

32. <ul><li>2 main types </li></ul><ul><ul><li>Enquiry </li></ul></ul><ul><ul><li>Buy </li></ul></ul>Conversions

33. Form Primary and Secondary Actions Focussing the visitor on what you want Use button size, style and colour to focus the user and increase conversions

36. 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

37. Which form will visitors most use?

38. Which form do visitors most use? 14% 86%

39. How well do these enquiries convert into sales?

40. How well do these enquiries convert into sales? 17%

41. How well do these enquiries convert into sales? 17% 55%

42. <ul><li>They can be long </li></ul><ul><li>They can be complex </li></ul><ul><li>They can give the visitor many choices </li></ul>TIP – be careful of enquiry form myths

43. <ul><li>#UX101 objective </li></ul>Don’t hide your contact details

44. TIP - Tailor your enquiry forms Make it easier for visitors to specify what they are interested in by providing options on your enquiry forms

45. Which test won? Original version

46. Which test won? Test version A

47. Which test won? Original v Test version A - RESULTS + 9%

48. Which test won? Test version A – What and why <ul><li>Make the required and optional information more obvious </li></ul><ul><li>Remove the back button to encourage completion </li></ul>

49. Which test won? Test version A

50. Which test won? Test version B

51. <ul><li>#UX101 objective </li></ul>Answer key visitor questions

52. Which test won? Test version A v Test version B - RESULTS + 66%

53. Which test won? Test version B – What and why? <ul><li>Remove branding to focus the visitor on completing the form </li></ul><ul><li>Provide support information as to the 2 different options for getting a quote </li></ul><ul><li>Answer visitor questions to encourage more requests for quotes </li></ul>

54. <ul><li>#UX101 objective </li></ul>Remove dead ends

55. 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!

58. <ul><li>#UX101 objective </li></ul>Watch other people use your website

59. <ul><li>Getting an understanding of how other people use your website is one of the most enlightening experiences you can have </li></ul><ul><li>There are 3 type of user testing, suitable for all budgets: </li></ul>User testing Guerrilla Remote Moderated

61. What is guerilla user testing? FREE Simple Enlightening Delivers actionable results

62. <ul><li>#UX101 objective </li></ul>Fall in love with web analytics (esp Goals)

64. What is remote user testing? Cheap Simple Enlightening Delivers actionable results

65. Try it for FREE with a PRWD partner: Visit http://whatusersdo.com Use promo code UX101 1st 50 get one FREE test

66. What is moderated user testing? In-depth Comprehensive Important for larger brands Delivers actionable results

67. Moderated Testing in Manchester with MMU > MMU are a PRWD partner > Fully featured testing lab > Suitable for websites, games and mobile

69. <ul><li>#UX101 objective </li></ul>Don’t make people think

71. <ul><li>#UX101 takeouts </li></ul>Good usability and user experience isn’t just for the big boys

72. <ul><li>#UX101 takeouts </li></ul>If you don’t measure what you do, you don’t know if its working

73. <ul><li>#UX101 takeouts </li></ul>There is no magic formula – you need to understand what your users want

74. 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 PRWD 22 Lever Street Manchester M1 1EA http://twitter.com/paulrouke

75. Why we leave websites 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 % of site visitors 100% 0% Forms errors

76. 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