Usability & User Experience 101 - #UX101

9,151 views

Published on

Paul Rouke from PRWD introduces you to usability and user experience, and provides you with a range of insights, tips and best practice that can be used when working on web projects.

The presentation slides cover key site areas such as homepages, landing pages and enquiry pages.

The twitter hashtag is #UX101

Published in: Design

Usability & User Experience 101 - #UX101

  1. 1. Usability and User Experience 101 by Paul Rouke Head of Usability at PRWD 20 th February 2010 @ MMU Twitter Hashtag #UX101
  2. 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. 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. 4. PRWD Clients Include PRWD clients include…
  5. 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. 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. 7. <ul><li>#UX101 objective </li></ul>Provide breathing space
  8. 8. Characteristics of bad/poor websites Tweet #UX101 bad .......................
  9. 9. Benefits of improving website usability Tweet #UX101 benefit .......................
  10. 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. 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. 12. <ul><li>#UX101 objective </li></ul>Use free tools to test different ideas
  13. 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. 14. Clear primary navigation Clear proposition Prominent call to action Credibility enhancement Visual stimulus
  15. 15. | Clear primary navigation Clear proposition Prominent call to action Credibility enhancement Visual stimulus
  16. 16. Clear primary navigation Clear proposition Prominent call to action Credibility enhancement Visual stimulus
  17. 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. 18. Case study – don’t hide your USP’s
  19. 19. Case study – don’t hide your USP’s
  20. 20. Case study – don’t hide your USP’s
  21. 21. <ul><li>#UX101 objective </li></ul>Don’t hide your unique selling points
  22. 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. 23. Landing pages – bespoke
  24. 24. <ul><li>#UX101 objective </li></ul>Encourage visitors to enquire/purchase
  25. 25. Landing pages – bespoke Who What Why Lets do it
  26. 26. <ul><li>#UX101 objective </li></ul>Ensure your primary call to action is clear
  27. 27. Landing pages – existing internal pages
  28. 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. 29. <ul><li>#UX101 objective </li></ul>Answer the question – where am I?
  30. 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. 31. <ul><li>#UX101 objective </li></ul>Help visitors decide “where should I go next?”
  32. 32. <ul><li>2 main types </li></ul><ul><ul><li>Enquiry </li></ul></ul><ul><ul><li>Buy </li></ul></ul>Conversions
  33. 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
  34. 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
  35. 37. Which form will visitors most use?
  36. 38. Which form do visitors most use? 14% 86%
  37. 39. How well do these enquiries convert into sales?
  38. 40. How well do these enquiries convert into sales? 17%
  39. 41. How well do these enquiries convert into sales? 17% 55%
  40. 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
  41. 43. <ul><li>#UX101 objective </li></ul>Don’t hide your contact details
  42. 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
  43. 45. Which test won? Original version
  44. 46. Which test won? Test version A
  45. 47. Which test won? Original v Test version A - RESULTS + 9%
  46. 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>
  47. 49. Which test won? Test version A
  48. 50. Which test won? Test version B
  49. 51. <ul><li>#UX101 objective </li></ul>Answer key visitor questions
  50. 52. Which test won? Test version A v Test version B - RESULTS + 66%
  51. 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>
  52. 54. <ul><li>#UX101 objective </li></ul>Remove dead ends
  53. 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!
  54. 58. <ul><li>#UX101 objective </li></ul>Watch other people use your website
  55. 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
  56. 61. What is guerilla user testing? FREE Simple Enlightening Delivers actionable results
  57. 62. <ul><li>#UX101 objective </li></ul>Fall in love with web analytics (esp Goals)
  58. 64. What is remote user testing? Cheap Simple Enlightening Delivers actionable results
  59. 65. Try it for FREE with a PRWD partner: Visit http://whatusersdo.com Use promo code UX101 1st 50 get one FREE test
  60. 66. What is moderated user testing? In-depth Comprehensive Important for larger brands Delivers actionable results
  61. 67. Moderated Testing in Manchester with MMU > MMU are a PRWD partner > Fully featured testing lab > Suitable for websites, games and mobile
  62. 69. <ul><li>#UX101 objective </li></ul>Don’t make people think
  63. 71. <ul><li>#UX101 takeouts </li></ul>Good usability and user experience isn’t just for the big boys
  64. 72. <ul><li>#UX101 takeouts </li></ul>If you don’t measure what you do, you don’t know if its working
  65. 73. <ul><li>#UX101 takeouts </li></ul>There is no magic formula – you need to understand what your users want
  66. 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
  67. 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
  68. 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

×