Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Psychology & UX: Evidence-Based Techniques to Improve Your Customer Experience
Similar to Psychology & UX: Evidence-Based Techniques to Improve Your Customer Experience (20)
Recently uploaded
Recently uploaded (20)
Psychology & UX: Evidence-Based Techniques to Improve Your Customer Experience
- 1. PSYCHOLOGY & UX: Evidence-Based Techniques to Improve your Customer Experience Cynthia Tang XD Team Lead, Sitback Registered Organisational Psychologist
- 2. ►How to review your website’s UX ►How human biases affect the way we design for - and interact with - websites ►How to encourage user behavioural change and improve customer experience ►The UX design features that increase conversion rates and drive engagement ►How to make a compelling case to your organisation to invest in UX Today’s webinar …
- 3. What makes a good user experience?
- 4. What makes a good user experience?
- 5. Heuristics leads to biases
- 6. ►Optimises first impressions ►Maintains engagement ►Design for frictionless flow ►Tap into and leverage people’s mental shortcuts ►Influence people’s decision making ►Nudge people towards taking action, or engaging with your website Why do we need heuristics & biases in web design?
- 8. Familiarity heuristic = mere exposure effect (bias) ►Familiar UI design ►Familiar language ►Familiar experiences matching real world expectations
- 9. Affect heuristic ►We rely on emotions when making decisions ►Allows us to reach decision quickly and without as much effort
- 12. Nielsen’s 10 usability heuristics
- 13. Conducting a formal heuristic evaluation
- 14. ►Implement and action the highest priority issues with the largest usability impacts first ►Or implement the quick wins as early as possible ►A/B test any ambiguous or contentious areas What do you do with the findings? A B
- 15. ►Understand that people have memory limitations ►Understand how human memory works Other ways to leverage psychology to improve CX
- 16. ►Forgetting occurs because our memories interfere with and disrupt one another Human memory is limited and flawed
- 17. Chunking CARD: 4417212456789222 PHONE: 4407671401 LANG: ASIAUSADATAPERCENT CARD: 4417 – 2124 – 5678 - 9222 PHONE: (440) 767 - 1401 LANG: ASIA USA DATA PERCENT
- 19. Keep it simple!
- 20. Write concise scannable content ►Short ►Rich in information scent ►Front-loaded with most important keywords ►Understandable out of context ►Predictable
- 22. 1. Create focus 2. Build structure 3. Stay consistent 4. Show benefits 5. Draw attention 6. Design for trust 7. Reduce friction 7 principles of conversion design
- 23. Reduce choice overload: Create focus & design for a single goal
- 24. Build structure to your page layout
- 25. ►2 fonts & 3 colours MAX Stay consistent
- 26. Design Match
- 27. ► Bandwagon effect ► Use a headshot photo of a real person ► Highlight key details ► Feature multiple testimonials Leverage the Bandwagon Effect through customer testimonials to build trust in your brand
- 28. Influence people to “buy” ►The bye-now effect = buy
- 29. You’re ready to consider UX but is your business ready?
- 30. ►Use analytics to identify key pages or key user flows on your website ►Identify how key metrics on these pages are performing: ►Provide a simple calculation using these metrics to demonstrate ROI Securing your business’s buy-in to invest in UX $40 x50 $40 = $2000 p/day / $730,000 p/year $50k in UX ROI in 25 days
- 31. $5k+ Provide different UX options utilising the ‘door in the face’ bias UX heuristic evaluation Small Website support & optimisation Medium $15k+ End to end UX research & design project Large $50k+
- 32. ► Better conversion rates ► Better cross sales ► Improved customer retention through better sense of trust ► More return visits ► More likely to recommend to other users ► More effective marketing spend on customer acquisition ► Reduced support (customer service & training) The benefits of improving your website’s UX
- 33. ►Designing based on heuristics ►Designing for memory limitations ►Designing for conversion To recap …
- 34. ►Head to https://biascards.com/ Get your set of Bias Cards
- 35. THANK YOU To find out more about our UX and website optimisation services, visit sitback.com.au
Editor's Notes
- Good morning everyone and thank you for joining me! I’m excited for this webinar today – its going to be jam packed with lots of evidence based psychology principles that you can leverage to improve your website’s digital presence
- In today’s webinar here are a few things we’ll cover today, I’d like to touch on the concept of heuristics and biases. I will also walk you through some heuristics and how we can leverage these to design for behavioural change, and to help increase conversion rate on your website
- To start – what do you think makes a good user experience? Well there are different layers to what makes for a good experience, as you can see here in this diagram – aka User Experience Hierarchy of Needs’ model, not only does it have to be functional, reliable, usable, and convenient – but ideally, an experience should also be pleasurable and meaningful. This is based on a famous psychologist’s theory - called Maslow’s hierarchy of needs. Where he proposes that the more basic needs ( food, water and shelter) need to be covered before we can focus on the secondary or higher-levels of the pyramid like self-actualisation (reaching a person’s full potential). The same happens with User experience: we need to make sure that we have covered all the basics first. If an interface or system is not reliable, functional or usable, it will be difficult to even create a pleasurable or meaningful experience.
- To ensure your website covers the basics of UX – so it is functional, reliable and usable, you can firstly leverage the use of heuristics in the design of your website. In the world of website UI/UX, heuristics are often discussed from the perspective of a website’s “must haves,” and they can serve as very helpful guidelines for good UX. But what exactly is a heuristic? The word heuristics loosely comes from the ancient Greek meaning to find or to discover. Mostly, a heuristic is a guideline – an experience-based approach to problem-solving. its essentially a mental shortcut we naturally lean on to make quick decisions in the real world, as it is often driven by uncertainty.
- It’s important to note that heuristics can lead to cognitive biases and cause us to commit certain fallacies. Since heuristics are the shortcuts we use to reduce task complexity in judgment and choice, the gap between what we’d normally do and the heuristically determine behaviour leads to what we call biases. Heuristics and biases are two sides of the same coin, Know that you can also leverage these biases in your website to tap into and influence your user’s behaviours – it’s important that we have an awareness of both when it comes to building great UX on your website. To help you with learning more about these biases, we've got a PDF set of Bias Cards that we'll send to you after this webinar. However, to say thank you for sharing your time with us today, we'd also like to offer you the opportunity to get a pack of these cards in real life {holds up the pack) that we sell in our store for $20. At the end of the session we’ll give you more details on this if you’re interested.
- The benefit of leveraging the use of heuristics/biases in our web design will allow us to create UX that optimises on your customers first impressions and maintains engagement Design for frictionless flow Tap into and leverage off people’s mental shortcuts Influence people’s decision making Nudge people’s towards taking action, such as engaging with our website I’d now like to take you through a few heuristic examples which you should keep top of mind when designing and developing your new website OR even when evaluating an existing website.
- The first one is the availability heuristic which describes our tendency to use information that comes to mind quickly and easily when making decisions about the future. The easier it is to think of an example of something—an event, entity, we think: “I remember this, so it must be important.” It’s a classic subjectivity-is-not-reality moment. We leverage this heuristic when we remind a user of a problem they face. By keeping it top of mind, they’ll more likely consider it a problem worth solving as they’ll perceive it to be more significant than it actually is. When you think of your key landing page design and copy, make sure your’re focusing the design and messaging on the problems your product solves, not what it does. “We save you serious money, stress, time” is much more impactful than “Fresh food delivery online.” as you can see in this Hellofresh example, it is reminding the user and keeping it top of mind that preparing for meal times are expensive, stressful and time-consuming. This reminds the user the problem of getting meals on the table as time consuming, effortful, stressful and expensive, which make it more significant of a problem than it actually is. This message is more likely to drive the user to buy into the idea of Hellofresh to help them resolve this significant problem. As you can see in this example, they’ve also made sure to cut all irrelevant info from their design on their homepage, as every irrelevant message will dilute the relevant ones.
- Another heuristic I’d like to show you is the "Familiarity heuristic”. This heuristic describes our tendency to favor the familiar over the strange. This heuristic occurs because we equate familiarity with safety– most of the time this serves us well but it can also form into a bias known as the mere exposure effect, where it’s been found that people will more likely consider the familiar option being the best option even if it’s not the most logical decision. Based on our understanding of this, it then makes sense to avoid deviating your website from known design conventions in order to be viewed favourably by our users, e.g. utilising the placement of your logo in the upper left of your header which will take the user back to home on click, if you move away from this pattern it throws your users off as and makes them view your brand and website as unfamiliar. This also applies to the language you use. We also apply this concept into making a digital experience and it’s process feel familiar by mimicking a process from the real world, this makes these experiences much more enjoyable. For example, choosing a movie to watch on Netflix was designed to mimic the feeling of scanning the shelves of a video store. This familiar process makes us feel comfortable and more likely build continued engagement with the platform.
- The third and last heuristic I wanted to share with you today is the affect heuristic. As you can guess by it’s name the affect heuristic refers to how we can rely on our emotions when making decisions, which allows us to reach a conclusion quickly and without much effortful thought. To encourage your users to make a decision and reach a conclusion quickly about your brand, or to move them further down the funnel, we can tap into their emotional response through the clever use of visuals and content. Keep emotion at the forefront of your key pages like your homepage and landing pages with powerful, evocative language, photography, and colors . These are all very important as it can determine whether or not they’ll use and like your website in that split second they land on it. Notice how Airbnb uses the richly charged idea of “home” throughout its design. They know that traveling can be a pain especially the logistics of organising accommodation. Renting out a stranger’s home can feel unsettling. But being welcomed home? That’s much more comforting and by tapping into that emotion through the wording, and imagery used, they’re able to elicit a much more positive emotion to entice the user to stay on their website and explore further.
- The affect heuristic also comes into play when we use real life photography of people. There’s compelling evidence to suggest that this will get you a higher conversion rate than a photo or screenshot of your product as it’s generating an immediate emotional response. Research has found that images of people are much more memorable and increases our feelings of empathy . This in turn makes us more suggestive and open to buying.
- This was a famous case study from Basecamp in their early days, and it showed that a photo of a person to a landing page boosted conversions by a whooping 47%. As you can see The Person Page was far shorter and there was less information about the product. However it had a 47% percent increase in paid signups than the Long Form design. They then actually go on to test different types of images of people, and found that “big photos of smiling customers work the best”.
- As mentioned before, we can use heuristics as guidelines to keep UX top of mind when designing a new website, but we also utilise them to to systematically and quickly determine an existing website’s usability. Overtime, UX practitioners have developed various heuristics to use when evaluating an interface design but the most popular one (to this day) comes from Jakob Nielsen in 1994 who came up with 10 key heuristics. One of the heuristics that we see often missed in a lot of website is Consistency and standards – which states that Users should not have to wonder whether different words, situations, or actions mean the same thing. Websites should follow platform and industry conventions. Whilst new designs look nice visually, if it does not maintain consistency with other website design patterns then it will increase your user’s cognitive load by forcing them to learn something new. This is derived from the familiarity heuristic that I’d just spoken about,
- AS UX practitioners, we utilise these 10 heuristics to assess a website’s usability to find flaws in the interface design. We start by defining what we want to test (either the entire website or part of it by understanding the web analytics and pinpointing key pages or key drop off points), get an understanding of the website’s end users – who they are and what their goals, and needs are. We’ll then pick key tasks that the user will complete on the website and assess the pages that the user will come into contact assess for things that break away from the heuristics. We’ll then flag usability issues according to how severe and critical they are. If you have access to a UX practitioner it’s recommended you run a HE on your website especially if you’ve not reviewed your website before or your website has grown since it’s inception. To help you get started, you can try our UX checklist as a starting point to help see whether your website requires further review by a UX practitioner. We’ll send a link to this tool after the webinar as well.
- But once you have findings from the heuristic evaluation, what should you do with it? Our recommendation is to implement as many quick wins as possible, and A/B test any ambiguous or contentious areas, or where there is more than one potential solution. If you've got your own internal developers to do this, great. Many of our clients choose to deal with this through our S&O service, where they can tackle both outcomes from the HE and also other day to day website requirements, like bugs, functionality changes and performance enhancements to speed up the site
- Aside from heuristics another aspect of human psychology can be applied to UX. From research, we know that people’s memory plays a large role in how they process and perceive information online. By knowing how memory works, we can create human-centered interfaces which correspond to the natural abilities of the users, save their effort and boost usability.
- The biggest issue with human memory is that our short-term memory is fragile, degrades quickly and is subject to a lot of errors. Forgetting occurs because our memories interfere with and disrupt one another. Famous psychological experiments showed the store of short-term memory is for 7 +- 2 items. However, modern estimates of our short term memory capacity are actually lower, around 4 – 5 items. Because of this, UX practitioners try to make people remember things from one task to another, or one page to another.
- However, our short term memory limitations can be improved through a process called chunking. Where it’s been found that humans process information better when it’s put into small groups. We need to chunk larger or complex pieces of information into smaller chunks for clarity. Showing too much information all at once can lead to cognitive overload, which happens when we don’t enough memory capacity to process or remember things properly.
- Based on the concept of chunking, it’s also important to care about the concentration ratio of elements on a page. If you present several choices, buttons, options all at once, you can expect that it will take more time and effort for a user’s short-term memory to work them over and this can distract them from making the final decision or key interaction we want them to take. This is one of the root causes of inefficient landing pages or sales funnels: even if they are stunningly designed, as the over-distracted user can go away before the conversion happens. Divide the objects on the screen or page into groups of primary, secondary and tertiary importance. In this example here, the credit card landing page is overwhelming, there’s conflicting CTAs to check for offers, learn more and also browse all the different types of credit cards. If we think about why someone would be looking at this page, to help move them further down the funnel we should focus them on prequalifying for a card first to take that action first. But here, Chase is offering them to browse and explore a range of credit cards. The lesson here is we need to choose just 1 goal for a landing page and then base our designs around that. Less is more when it comes to CTAs.
- A better example that utilises less conflicting elements on a page is this Citibank credit card page we designed, here we’ve divided the objects on the page into groups of primary, secondary and tertiary importance — the most important component of this page is right at the top to encourage the users to use the card suitability tool to help them narrow down on the card options below. Similarly we’ve reduced any conflicting CTAs and have kept only one consistent CTA of “apply online now” on the People’s Choice Credit card landing page
- Chunking is also effectively applied to the copy content in the interfaces. Nielsen conducted a study which shows that headlines of 5–6 words work effectively, when compared with extensive headlines presenting a full sentence. This is tied to the concept of chunking as we can process shorter titles faster and more effectively. A good example from one of our clients Lifeline Australia focuses on this as they need to ensure their content is easily digestible and memorable especially for people who may be reading this information under high stress When creating website header titles keep it short (because people don't read much online) rich in information scent, by clearly summarizing the target article front-loaded with the most important keywords (because users often scan only the beginning of list items) understandable out of context (because headlines often appear without articles, as in search engine results) predictable, so users know whether they'll like the full article before they click (because people don't return to sites that promise more than they deliver)
- It may feel like UX web design is subjective at times, but there are known principles of good design that everyone can learn to design pages that are both user friendly and high converting even if you’re not a UX designer. I’d like to introduce to you the concept of Conversion-Centered Design (CCD) which is a framework developed by the co-founder of Unbounce for building high-converting marketing campaigns. It encompasses all the persuasive design techniques and psychological triggers you can use to get visitors to take action on your landing pages. You can use this proven approach to net more leads, sales, and signups for your business.
- Here are the 7 principles that make up the conversion centered design framework – today I’d like to take you through a few of them.
- 1. Create focus. We know that people get overwhelmed when they are presented with a large number of options to choose from. This is a well known cognitive bias known as the choice overload effect .We can apply our understanding of this to landing page designs to drive more conversion by keeping the landing page targeted for 1 key goal. There is strong evidence that having one goal on your page will make visitors more likely to take action as it’s less taxing on their cognitive load. To do this, start by answering “what is the main action we want visitors to take on this page” The more we can align the page to a single goal the more likely the page will convert. You can start to create focus by: • Removing website navigation links and menus, and take out unnecessary links to your social channels • Hiding nice-to-know info in lightboxes or collapsible sections (this can also be useful for SEO as well, by increasing the keyword density on the page, without visually overwhelming the customer) • Making sure it’s obvious what you want visitors to do next by providing only one path forward (e.g., fill out this form) Realistically, people can only focus on one action at a time. The more choices you give visitors on a landing page, the more people will click away. the more links there are on a landing page, the lower the conversion rate tends to be.
- 2. Build structure. We know that to drive conversion we shouldn’t just dump content all over the place. Heat maps have shown that there are two main patterns visitors follow when they’re reading online. If you build your pages to follow your users natural reading pattern it’ll improve their speed in information consumption and make it a more seamless viewing experience. F-Pattern If you’re working with a page that has a lotta copy on it, the F-pattern might be the one for you. Visitors typically start out in the top left corner, look to the right side of the screen, then down the left side until another element or line of copy catches their attention. (Creating an F-shaped pattern in the heat map.) If you have a text-heavy page, put your most important info that follows this F shaped pattern. Z-Pattern If your page is light on text, you’re better off designing for a Z-Pattern. This is how readers typically approach a page with less copy on it. You can play with this pattern by alternating between left and right-aligned content blocks in your landing page structure. This helps to break up the page in an appealing way, and creates a natural flow for the eye to follow as you scroll. This is an example where we’ve utilised this design pattern for one of our clients – People’s Choice credit union, on majority of their landing pages where there is minimal text.
- 3. Stay consistent. This will allow you to build a strong relationship with your customers through every touchpoint you have with them! This means you should ideally use the same fonts, colors, and styles across your landing pages and your website. Resist the urge to try something wildly different or experiment with a new style. As a rule of thumb, we recommend sticking to two fonts (one for headers, one for body copy), and no more than three main colors on your page.
- Most marketers are already familiar with the concept of message match. But there’s also a lesser-known cousin that tends to get overlooked: design match. This is a measure of how well your landing page design matches the visuals of your ads. In line with the concept of staying consistent, make sure you pull through design elements from your hero image and color scheme to any visual ads you create.Our brains actually process visual information up to 60,000 times faster than text, which means design is the first thing visitors will notice on their journey from pre-click to post-click. To make the landing page feel relevant to what they saw before, you need to create that strong feeling of coupling in the minds of your users..
- 4. Build trust. Your users are taking a leap of faith when they click an ad. The internet is full of sketchy websites and spam offers that are literally “too good to be true.” If this is the first time someone is interacting with your brand, you need to design for trust. Prove your credibility by putting together social proof that’s not just convincing, but believable. One testimonial can sometimes be powerful enough to persuade visitors. But if this is the first time someone is interacting with your brand, you can dial it up by including a collection of reviews on the page. By doing this, you’re leveraging off the popular cognitive bias known as the bandwagon effect. This refers to our tendency to do or believe things because many other people do or believe the same. It is also referred to as Herd Behaviour. By demonstrating testimonials and reviews, to demonstrate that other people are purchasing or using your products, visitors are more likely to try something for themselves as it seems like “everybody is doing it,” As shown in one of our health insurance client’s website, we’ve designed to showcase 3 testimonials at once with additional testimonials displayed within the carousel design.
- Outside of the 7 principles of conversion design, one extra tip is to consider leveraging the bye-now effect which describes a specific word-priming scenario where the reading of the word “bye” causes us to think about its phonological twin, “buy”, especially when we're tired. When our frame of mind shifts to think of the verb “buy”, it can potentially influence our behaviorur subconsciously. The bye-now effect shows that we can drastically change our consumption behavior based on priming words. By exposing people to one piece of information it can affect their response to something else afterwards. If you recall, a famous misuse of the priming phenomenon occurred during the American presidential election by Cambridge Analytica in 2020.
- So based on all the UX tips and tricks we’ve shared today, you’ve identified a few UX things that you want to improve on your website – you’re ready but how do you get your business to come on board? Poll: In your current organisation, who has the capability to look after the UX? For those who already have UX in house or have a UX agency then great you can easily get someone to start looking at these things for you, but if you don’t then how do you convince your business to invest in UX resources? especially if you’re a smaller business.
- To start, you can use analytics to identify key pages or key user flows on your website and find which ones are under performing and see how they’re currently performing against industry standards Identify how key metrics on these pages are performing: Conversion rate – is there currently month on month conversion rate improvements or has it stagnated? Bounce rate – is it underperforming compared to industry standards? Number of support requests and type of support requests - is your support center overloaded with requests? Also what type of requests are coming through, this gives you insight into confusing points of your website Website speed performance If your metrics are low and you haven’t seen any improvements over time – that’s a strong case you can present back to the business to consider investing in your website’s UX to boost those numbers up Or you can also provide a simple calculation to demonstrate ROI – For example, if your users typically spend $40 per visit, but 50 abandon your website each day, you’re losing out on $2,000 per day, or $730,000 per year. In this example, let’s assume that a $50,000 investment in research, design and testing would remedy the issues for your users. With those issues addressed, you would be on a new path to increased revenue, breaking even on the investment in roughly 25 days.
- Depending on your available UX budget, try to provide a number of different options S/M/L to help make your case to make it less daunting and provide different cost options for the business Small = Heuristic Evaluation (cheap and fast) Medium = Website Support and Optimisation (ongoing improvements against a defined roadmap covering both technical performance and UX) Large = Complete UX Research, Design and testing project (expensive and slow, but most rigorous and reliable) To help further your case, utilise a popular psychology heuristics, known as the “door in the face”. This heuristic demonstrates that We're more likely to agree to a small request after first rejecting a larger one – so frame to the business the large option first, and if that’s not something they have the appetite or budget for, then verbally emphasise the concession of choosing a smaller option over the initial one – the key here is to verbalise it - “you’re right, that is a lot , how about this smaller option instead?” which prompts the other party to reciprocate and accept the other option you’re suggesting
- To really drive home the value of UX to your business, make sure you also showcase to them the range of different benefits you’ll achieve, aside from the obvious ones such as improving conversion rates, improving cross sales, customer retention and engagement, we can also encourage more return visits, have our customers more likely to recommend you to other users, achieve more effective marketing spend on customer acquisition and reduced customer support as your customers are having a better online experience with less friction.
- I hope that you’ve gotten some helpful tips and guidance on how to look after your website’s UX today leveraging known heuristics and psychological principles to improve your website’s conversion and influence your user’s behaviour. Thank you all for tuning in!
- We will send everyone PDF Bias cards and the PDF UX Checklist. Those who want to get a physical pack of bias cards – please scan the QR code and fill out the form so we can send it out to you! Thanks everyone
- How much does one of these Heuristic Evaluations actually cost? They usually cost $6-7k for a review of 7-8 key pages of your website – this can increase or decrease depending on the number of pages or user flows that needs to be assessed. If you could recommend one thing for me to go away and investigate or change about my website to make a difference to conversions, what would it be? Identify the key conversion pages and monitor it’s performance, if there’s been no improvements and the key metrics are performing poorly it’s worthwhile getting a UX practitioner to review your website and conduct a HE. One thing what we consistently see causing problems on people's websites? How much of my Website budget would you recommend is spent on UX-related activities rather than actually building things? We're running A/B testing all the time. Why would I do UX instead or perhaps as well as? As part of your arsenal of tools in your UX toolkit, A/B testing is one way to improve UX – however the issue with A/B testing is you may not know the “ why” behind the success or failure of your experiments – it would be more beneficial to also design experiments with evidence based UX solutions in mind.