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)