Digital Becca

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:

• Design efforts can be prioritised based on the personas
• Alan Cooper devised personas
• Book recommendation – The personal life cycle (John Pruett)