5 Usability steps to get more out of your website

1. 5 Usability steps to get more out of your website Chris Rourke March 2011

2. Who are User Vision? • User Vision is an Edinburgh & London based User ExperienceConsultancy, with clients, including: • BBC • Directgov • English Heritage • Scottish Enterprise • Transport Scotland • NHS & NHS Scotland • Scottish Government • Department of Health • Student Loan Company • Learning Teaching Scotland • Government of Abu Dhabi • Army, Navy & Royal Marines • Central Office of Information • many universities (e.g. Dundee, Sheffield, RGU) • many local authorities (e.g. Fife, Aberdeenshire, Leeds)

3. Work Across Unmediated Platforms ToImprove the User Experience To Improve User Centred Skills To ImproveUser Insight ToImprove Accessibility Internet Usability Testing Training Focus Groups AccessibilityTesting Intranet Content Guidelines User Profiling Accessibility Audit User Experience Evaluation Desktop Application Software Writing Guidelines LongitudinalDiary Studies Information Architecture Design Mobiles & PDAs User Centred Design Consultancy User Case Analysis Eye Tracking Analysis Interactive TV Trust & Emotional Assessments Physical Products Wireframe Designs What does User Vision do? We test real users, bringing their experiences of usability and accessibility issues into your development process, and so improve the User Experience

4. 5 Steps to a more usable website Get personal Sort our your navigation Search for a good experience Form it right Test it out

5. What is Usability? • Effectiveness | Can the user reach their goals? • Efficiency | How fast, number of steps, number of errors? • Satisfaction | Was it a good experience? Would they do it again? Recommend it to others? • Learnability • Trust & Security The effectiveness, efficiency and satisfaction with which specified users achieve specified goals in specified environments ISO DIS 13407 “Human Centred Design for Interactive Systems

6. The User, Content and Context Context determines Type & Form of Content Context sets Constraints& Expectations Users Do Task Content Provides Experience

7. The usability tug of war • There can be a tension between designs that are “beautiful ”, usable, or to be optimized for SEO • So who should win? • Users will appreciate a site that looks good • They will be more likely to visit a site that can be easily found • But they won’t come back to a site they can’t use • And they won’t recommend a site they didn't enjoy using • It is the users who ‘use’ your site, who choose to complete a purchase, make return visits and recommend your site

8. Reduced Service Delivery Cost Lower administration costs through self-service Lower administration costs through less contact Lower administration costs through less complaints Channel migration to lower-cost channels Shared Services opportunity Better Service Take-Up More return visits Better conversion rates Fewer barriers to services More effective marketing & viral marketing Improved Customer Service Improved trust Quicker service delivery Public Sector UsabilityBenefits

9. Answer query without customer contacting you Get customers to respond to marketing campaigns Offer shared services with other public bodies or intermediaries Maintain regular contact with specific target groups Your Business Goal Promote regulation enforcement & standards compliance Provide services with the basic clerical work done by customer Resolveincidents with the basic clerical work done by customer Achieve wider public and civic engagement Give money: benefits and grants, with the basic clerical work done by customer Collect money: tax, fees and fines, with the basic clerical work done by customer Public Sector’s Web Goals (Context) What do you want to achieve from your website?

10. Get Information without fuss Change behaviour that has a personal benefit Ignore organisational boundaries, with help from intermediaries Find out what is going on Customer’s Goal Not get into trouble with the regulations Apply for services directly without fuss Complain about service failures Have an influence on decisions Get grants and benefits entitled too Pay (the right) Fees and Dues Your User’s Web Goals (User) What do your users want to achieve – these ought to map together!

11. Well designed Information Integration with Marketing effort & appropriate content Problem-focused with deep linking, shared IAs, non-organisational sites Push out information via Twitter, RSS, Blogs, Email Alerts, Newsletters How the Web can Match the Two Well designed information offering carrot and stick Web forms & business process integration Web forms & business process integration Social Media such as RSS, Forums, Polls, Surveys, User Content and Tagging Web forms & business process integration Web forms with Payment & business process integration Fulfilling those two goals (Content) How can your users get what you want to give them?

12. Typical barriers to a good user experience 100% Slow page load Accessibility problems Homepage doesn’t sell company well Poor look and feel Confusing jargon Poorly designed navigation Lack of information / product detail / images % of site visitors Unreadable content Lack of trust Can’t filter or sort results Unclear error messages Mandatory registration No clear call to action Annoyance at shipping costs Content doesn’t sell the product Privacy & security concerns Poorly designed forms 0% Continue with purchase First Impression Commit to purchase Product search / browsing On to our 5 Steps….

13. 1. Get Personal • You know all about your organisational context • You know all about your organisation’s content • Knowing your users, and keeping their needs in mind is more difficult. A solution is to Profile your users. • You may be able to use some customer insight work already done • You may rely on generalised profiles • You may create specific personas

14. Generalised User Types

15. User Profile Example A site with an older audience might think about: User profiles and demographic data is interesting – but can it help us picture them?

16. What is a persona? A fictional person who represents a major user group for your site. A persona focuses on user goals Personas take these customer profiles and give them a: name face life personality to individual people in each of these groups How do we develop personas? By analyzing what you learned about your users from user research, e.g. After ethnographic studies & interviews Online surveys Focus groups Usability testing User Profiling: Personas

17. Methods for creating personas • A broad process: • Start with Market Segments, identify common attributes • Get samples of these people get to know them better through research • Digest data • Present (and modify where necessary) the personas with business stakeholders – this co-design will gain buy in to this process and use of the resulting personas. • Create 4-6 personas (question granularity if more or less)

18. Sources of information to build personas • Watching – ethnographic / contextual analysis approach e.g. stores • Surveys Customer Insight material Analytics and Call Centre stats • Interview sample of actual customers • Either as part of other testing • Together in a focus group or depth interview • Interview Internal Client Customer-facing Resources • Call centre / front office staff, CSRs, store staff • Marketing staff

19. Developing a Persona • Fill out your Persona by asking them questions: • Do they have time to … • Do they have the money to … • Do they have the skill to… • What would stop them / turn them off • What would encourage them / help them • Who are they doing this for • How motivated are they • What do they hate • What do they love • … whatever is a pertinent question for the client / service /product

20. Never shops online Frequently shops online No internet access Constant internet access Low income High income Low IT skills Developed IT skills Infrequent flyer Frequent flyer More short-haul More lon-haul Consider the distinguishing characteristics Persona 3 Persona 2 Persona 1

21. Persona Presentation Round the Persona into a fuller person Behaviour traits that indicate how to respond User Journey Barriers to remove

22. Presentation styles

23. 2. Sort out your Navigation • Being unable to find content is the most common complain on large sites • Navigation labels are the stepping stones leading people to content • Card sorting – a simple but powerful way to develop your information architecture based on the mindset of your users • Its easy, fun & can be done early

24. Motor Vehicles Nissan Micra Vauxhall Vectra Ford Mondeo Cars Vans Motorcycles Ford Transit Suzuki Bandit Yamaha Diversion Card Sorting - IA testing • Separate your site’s content components onto cards • Have users sort cards into piles of things that go together • The piles do not need to contain the same number of cards. • Provide names for the groups. • You can create a hierarchy of 2 levels

25. Evidence gathered from card sorting • Typical useful outputs include • Tree diagram • Content affinity charts • Information can be gathered through other means • Categorisation (reverse card sorting) studies

26. Be Multi-faceted • Expected for e-commerce • Lets user “play by their own rules” creating customised navigation by combining facets • Can show the user how many items in each facet combo • Tips • Reasonable number of facets • Research users to create taxonomy • Order facets & values by importance • Facets must be well defined, mutually exclusive & clearly labelled • Good examples: Asos.com, Endless.com

27. 3. Search your search • The larger the site – the more likely people are to use search • Expectations are rising • Google Instant • Site search refinement • Most on-site search is far worse than Google • Tips: • Use your search query logs • Make spell checker flexible • Give an abstract for each result • Ensure page titles are unique • Consider Query Relaxation • Consider “best bets”

28. Search query logs • Valuable source of information about your users • Site Search Analytics to fine tune your search experience • What are most common queries? • For these are the results ones user should see? • Which common queries get zero results • Which common queries retrieve results that don’t get clicked through? • Which result is most frequently clicked through common query • Can you use this information to: • Promote selected content on your home / landing pages • Manually alter the order in the results page • Provide “best bets”

29. Site Search Engines: Query Relaxation If no results, need to re-do my search again, try different criteria.

30. Site Search Engines: Query Relaxation If no results, query relaxation allows me to choose options slightly outside my original search. www.newzealand.com.

31. Broader term Employing people Variant term Employment legislation Variantterm Work regulations Related term Industrial tribunals Narrower Terms Disability discrimination laws, dismissal & notice periods, employee rights, working hours, equal opportunities … Related term Wage Board Site Search Engines: behind the scenes Communications industries UF: Video recording industry UF: Printing industry UF: Publishing industry UF: Sound recording industry UF: Telecommunications industry BT: Business sectors RT: Music RT: Advertising RT: Media and the press RT: Visual arts RT: e-Commerce RT: Films and film making RT: Electronics industry RT: Information and communication technology RT: Internet RT: Postal services RT: Telephone services RT: Printing and copying services Hierarchical Preferred term Employment law Equivalence Equivalence Hierarchical Associative Associative From IPSV UF = Used For, BT = Broader Term, RT = Related Term, NT = Narrower Term

32. 4. Improve your Forms • Forms can be barriers to service delivery and transactions • Key is to remove the barriers while increasing confidence and the persuasion of the process • Tips • Distinguish primary & secondary action buttons • Use logical borders for sections of forms • Progress indicators • Allow flexibility (go back, cancel) • Consider inline validation, instructions • Review error messages

33. Forms: Primary & Secondary Actions • Provide a single primary path to completion with secondary options • Clearly distinguish between primary and secondary actions • Different button styles • Use buttons and links Primary action stands out No Clear Primary action

34. Forms: Inline formatting and validation Inline help text is automatically shown as people engage with input fields • Best for questions with potentially high error rates • Validate answers inline after they have finished providing an answer

35. Errors • Make sure errors are • Polite • Clear • Formatted correctly on page • Don’t let them be written by the tech testing team!

36. Usability testing - part of the UCD process • Usability is an approach to product development that incorporates direct user feedback throughout the development cycle in order to reduce costs and create products and tools that meet user needs.” • Usability Professional’s Association Usability Testing

37. Usability testing - its not just for the lab anymore “People will gladly waste a million dollars on their fancy design and not spend $4000 to see if it works” Jakob Nielsen Paper prototype testing Eye tracking Lab-based testing Remote moderated testing

38. True Intent & Remote unmoderated usability testing Online Survey Large Sample Size Focus Group Usability Lab Small Full User Experience (attitudes & behaviour) Market Research (attitudes) Research type Being remote Remote card sorting Remote unmoderated testing & True Intent Remote category testing

39. A/B Split and Multivariate Testing Test multiple areas of a web page with multiple variations of content for each area Courtesy of Maxymiser

40. A/B Split and Multivariate Testing • Several tools exist for helping in this research: • Google website optimiser • Maxymiser • Omniture • Goal is to identify marginal improvements in “conversions” – people staying on the happy path Courtesy of Maxymiser

41. Bolt-on Usability (We had to have the site up, so thought we would test it for usability (and accessibility) later) We have no usability budget Focus on the technology Focus on the business Assuming that the web designers will take care of it all KPIs and Project Success Criteria do not include usability measures Confusion on who the users are (public, patients, service users, customers, clients, citizens, residents, businesses, other public sector organisations) Feature-based design rather than a User Task-based design Inconsistency Senior Managers not seeing the web as vital to the success of the organisation And finally…..Top Usability Pitfalls

42. Thank You For further information, please contact Chris Rourke User Vision 55 North Castle Street Edinburgh EH2 3QA Tel:0131 225 0850 Email:chris@uservision.co.uk Web: www.uservision.co.uk Blog: www.uservisionblog.co.uk Twitter: www.twitter.com/uservision