Econsultancy user experience conference

This was attended by Seb in my team, these are his notes, here’s how to follow him on Twitter >

Characteristics of a poor website:

  • CTA not what the customer was expecting
  • Low technical compatibility
  • Too much overt marketing
  • Too much information on the page – getting redundant information

Usability:

  • Effectiveness: how successfully will a user be able to use the system
  • Can be measured by task completion or % of tasks successfully completed
  • Efficiency: how quickly were they able to complete the task
  • Can be measured by speed, or the number of pages they pass through vs optimal path.
  • Satisfaction: how did the user feel about their experience? Did they feel confident/in control?
  • Seek feedback from the user
  • “Usability an approach to development that incorporates direct user feedback throughout the development in order to reduce costs and meet user needs”

Why pages fail:

  • Early: slow page load, poor look and feel,
  • Browsing: confusing structure, poor search
  • Content: lack of information/product detail, lack of trust, no clear call to action
  • Conversion: poorly designed forms, privacy and security concerns
  • A reservoir of good will gets drained by these errors
  • Book recommendation – ‘Don’t make me think’ by Steve Krug

Summary:

  • User experience is what an individual experiences in the moment (in context), usability is the more holistic collection of those moments
  • Usability shouldn’t come at the end of a development process – then they are just objecting, causes resentment. Need to incorporate discussion of UX throughout the process, start from that point
  • A/B or multivariate testing
  • It might tell you that B is better than A, but it won’t tell you what C, D or E will look like
  • You need to come at it asking why, not just asking what works better.

Principles and examples:

  • Home page is the single most important page
  • Best place to outline value proposition
  • But remember that every page is potentially your home page because of deep linking
  • Trends – carousels, hero images, video  
  • Hero images – not necessarily of the product, but a brand statement or tone-setting image
  • Using trigger words in navigation as a subtitle
  • e.g. ‘Check in – boarding pass and baggage’ Giving the user a bit more information so they know where they’re going
  • Hero images can cause accessibility issues when text is overlaid on a varied background

Can you answer these 5 questions by looking at someone’s homepage?

  • Who are they?
  • What do they do?
  • Why should I be here?
  • Where do I start?
  • How can I do things here?

Landing pages:

  • Need to present key information
  • Need to present a single, linear journey.

Using psychology:

  • Commitment – people like to start what they finish
  • Social proof – allow people to demonstrate what they have done
  • Scarcity (limited time) if applicable
  • They need – clear relevance to user
  • A distinguishing USP
  • The perfect amount of information
  • A single, compelling call to action
  • Highlights benefits, not features
  • Short forms
  • Using psychological techniques to maximise conversions
  • They can be separate from global nav, if appropriate

Information architecture:

  • How you define content, group it, label it etc
  • Where does it fit in the design process
  • Iterative process
  • Want a good marriage of the user needs with the site objectives
  • Functional specs and interaction design need to be balanced with content requirements and information architecture
  • Information design and visual design come last
  • Good information architecture leads to reduced search times and increased success rates and customer satisfaction, improved brand loyalty
  • Navigation labels are the stepping stones leading people to their content
  • If users can’t logically get to the content, they will either search or give up
  • Designing an information architecture – card sorting
  • Quick, inexpensive, reliable
  • Try to make sure to consult end users in this process
  • Open card sorting – users sort into groups and then labelled
  • Closed card – user sorts cards into existing categories
  • 9/10 times recommend open card sorting
  • Okay to create duplicate pages in different parts of the architecture
  • Information architecture is essentially an exercise in finding the lowest common denominator

Tools to analyse card sorting:

  • Dendrogram
  • Cluster matrix – looking at the strength of affinity between two different categories

Tree testing:

  • Select a specific item/destination
  • Offer set of categories where it may be located
  • record success/failure in placing the item
  • Reasons for failure – item name, group label/structure

Remote methods for testing:

  • Optimal workshop – optimalsort and treejack
  • Maintaining a good IA – what starts off as a good site often evolves into poor navigation
  • Pressure to add more detail, reluctance to remove old content, demands to promote key topics
  • “Every superfluous page we create is one more dead end for an angry confused customer” – Gov.uk

Top task identification:

  • Create a long-list of everything someone might do on a website
  • Refine this to a shortlist of between 50-100 tasks
  • Get site visitors/customers to pick their top 5 tasks by voting in an online survey
  • Result is a ranked list of what people want to do on the website
  • Create an IA and navigation structure based around the top tasks
  • You need to get at least 200 people to engage with it
  • Very useful to make sure that what you’re doing, and what your users want, are aligned

Removal of unwanted content:

Telenor of Norway deleted almost 90% of their pages – conversions went up by 100% and support requests went down by 35%

Navigation:

  • Principles of good navigation
  • Implement consistent navigation throughout
  • Conventions in top left, search in top right
  • Keep main nav links together
  • Prioritise key user journeys in your site structure
  • Use breadcrumbs to limit location confusion
  • Number of categories known and won’t change – ensure labelling is unambiguous
  • Use a single background for non-selected tabs – should indicate to the user where they are at that moment.
  • Arrange tabs in order of importance
  • Mega-dropdown menu is a good compromise
  • Concertina menu
  • Typically left side of page
  • Can clearly show you where you are
  • Use different colours and indenting
  • But people are moving away from left-hand navigation
  • You should put the most important content at the top, but “above the fold” is moot because of screen resolution and in a mobile age people are happy to scroll
  • Faceted navigation
  • Let the content exist in one place, and have multiple routes to that content
  • e.g. BBC iPlayer – multiple, fairly standard categories e.g. channel, genre, A-Z
  • Letting the user play by their own rules
  • Also e.g. John Lewis – specify by brand, size, colour, price etc
  • What you call the categories and what you put in them needs to be based on user research
  • Generally tends to work well when you have a single type of content/product that has a lot of descriptive characteristics
  • Good links in action
  • Use meaningful links – clearly state what they will get when they click through.
  • Distinguish from non-link text
  • Avoid the click here – for accessibility and SEO

In-site search:

Challenges:

  • Search box not obvious
  • Search logic poor
  • Results are poorly presented

Solutions:

  • Flexible spell checker
  • Give an abstract for each result
  • Ensure page titles are unique
  • Allow for search refinement
  • Include predictive search
  • Using search analytics
  • What are the most common queries
  • Which common queries get zero results
  • Which results are most frequently clicked through

Use data to:

  • Amend content on your pages
  • Manually alter the order in results page
  • Provide best guess as searches
  • Controlled vocabulary/thesaurus
  • Preferred term/broader terms, variant terms, narrower terms – things that are generally in the semantic neighbourhood

Ecommerce:

  • Ecommerce principles (true intent studies)
  • Who are they?
  • Why are they here?
  • What are their unanswered questions?
  • What do they want to do?
  • Pogo-sticking: when the user bounces from a search page to a product, back to the search page etc. Can be tiring for the user.
  • Top half of page designed for people who know they want a product – bare minimum
  • The rest of page designed for hunters – full specs, deals and offers
  • Browsers will want “you might also like” content
  • Upsell and cross-sell – e.g. “shop the look”
  • Persuasion – 6 weapons of influence
  • Reciprocity – people will return a favour
  • Commitment – if people agree, they tend to follow through
  • Social proof – people do what they see others doing
  • Authority
  • Liking – people influenced by others they like
  • Scarcity – perceived scarcity generates demand

Three types of users on ecommerce sites:

  • Browsers
  • Hunters
  • Buyers

Key principles in form design:

  • Inform them at the start of the info you’ll need
  • Organise the content on your form into logical groups
  • Process indicators should indicate user’s place and next steps
  • Segment forms into groups, applying visual weight to headings
  • Consider smart defaults
  • Checkout process
  • Clear calls to action
  • Keep customer focused on completing the process
  • Provide reassurance of privacy/security
  • Forced registration during ecommerce creates unnecessary obstacles
  • Primary buttons on the bottom right hand side, secondary buttons on the left
  • Distinguish visually between primary and secondary buttons
  • Form validation using colour
  • When you’ve done something right, green
  • The form should prompt you to fix the fields that are wrong
  • Use task-specific buttons, CTAs rather than just “submit”
  • Invitation to register should come at the end

UX activities:

  • UX achieved through user-centered design
  • Who are our users?
  • What are their goals?
  • How can we help them achieve their goals?
  • Have we done it right?
  • Metrics for usability?

Context of use:

  • Effectiveness? number of tasks performed, persistent errors
  • Efficiency? Comparison to a happy path, count the number of steps
  • Usability impact: high (preventative), medium (significant delay), low (makes user pause/think) or positive (elegant/helpful)
  • Grade these against implementation impact – how easy are they to fix?

In usability testing:

  • Test plan design, task scenarios and accurate subject recruitment are critical
  • Recruit the right people
  • Design the test to address typical tasks and those that are most important for your success
  • Decide your metrics for success
  • Observe and listen to subjects, but don’t help them
  • Morae – screen capture software
  • Use a wireframing tool to do it (Axure / Balsamiq)

Using personas: