My name is Anna, and I am a User Experience and Design Consultant at Google. I hope you’re all enjoying the day and looking forward to the evening's events. Today, I'll share some best practices and A/B test suggestions for improving user experience and design. Beyond providing a checklist of items to test, I’ll also cover key concepts to ensure your A/B tests are successful and explain why it’s crucial to foster a culture of continuous improvement in your company, especially in mobile UX.
Picking up from where Lina left off in her fantastic talk, I'll dive into various UX suggestions for testing. Over the last four years, my team has completed over 600 UX projects with customers across EMEA, gathering invaluable insights that I’ll share with you.
I’d like to start with a story. Recently, I was in London, and in a restaurant, I encountered an interesting UX lesson. They brought me salt and pepper shakers, and I needed some salt. Assuming the salt shaker had five holes (as is common in my culture), I used it, only to find it was actually pepper. This is a perfect example of how design assumptions can lead to confusion for users.
Then, I went to Dublin and faced a similar issue in a pub. The shakers were identical with no labels, forcing me to guess blindly. Travelling often exposes me to such inconsistencies, making it clear how important intuitive design is. Here’s an example: can you guess where this peculiar design is from? It’s actually from Amsterdam, where creative designs sometimes compromise usability.
Consider this image I found online: a lady in Belgium collects salt and pepper shakers, and some of them are so ornate that it's impossible to tell their function. This highlights a common pitfall in design—prioritising aesthetics over usability.
So, how do we solve the salt and pepper mystery? Simple labels can make a huge difference. This brings me to my first point: always label what an icon does. People want clarity. When you include text labels alongside icons, you enhance usability. Users don’t care about conserving space as much as they care about understanding functionality. Plus, adding labels actually increases the clickable area, making interactions smoother on mobile devices.
A case study from Google Translate illustrates this well. When we added text labels to features, user engagement with those features increased significantly. This reinforces the importance of clear, intuitive design in enhancing user experience.
So, remember: whenever you design your websites or apps, prioritise usability by labelling icons clearly and ensuring users know exactly what to expect when they interact with your interface.
In the UI, I guess everyone was wondering what that weird snake was in the screenshot before. Now everyone knows it's the handwriting feature you can use. Just to wrap up on the topic of text labels, I saw something in the Google Cantina in Tel Aviv that made my day. You know how much time we spend next to the cutlery trying to figure out which is the fork and which is the knife? Someone added text labels, saving everyone a lot of time and effort. So, are we clear about text labels? Add them.
Moving on to the next real-life example and something else you can implement on your websites: do you have any idea what this is? Besides being a Walking Dead GIF, it represents a revolving door. Revolving doors were originally invented to allow more people in and out at the same time. However, as a user of a revolving door, you don’t control the speed, it moves fast, and you’re dependent on the people around you. This represents zero user control and a lot of anxiety.
This reminds me of animated carousels on the top of homepages, which force users into content exploration. We get annoyed by these animations. If I want to read what's on the banner, it often moves away too quickly. Let me show you an example of what not to do on a website. I can't use any of yours because you're all doing great, but here’s a real website example. You can see it's really difficult to engage with these moving banners. If you want to keep them, switch off the animation and put the user in control. User-initiated exploration is key because engagement is the new currency in UX.
A friend of mine, who blogs about his life in Ireland, found this on Reddit. Take a moment to read and enjoy it:
"10 items or less? 12 items or less? What if I have 11?"
Are you leaving your customers clear or confused about what they should do? How do you phrase things? This brings us to the importance of getting your copy right. Think about building your website experience with words. This is particularly challenging on mobile because you need to keep things short yet descriptive, easy for a child to understand, and translatable into other languages.
There are many UX copywriting rules available online, but let's focus on a few key points and common mistakes companies make.
Remember these ground rules for UX copywriting to create a better user experience.
This is a case study from the Google Search team that I'm happy to share. They used to have a text label "Book a Room," but they thought it might be too early for users to commit at this stage. So, they changed it to "Check Availability." This change met users where they were in their journey, and as a result, the number of engagements increased.
Another test you can run with copy is testing different labels for high-level navigation items, including category names. Adverse, a large South African omni-channel retailer, tested which text label worked best for one of their high-level categories. They changed it from "Sale" to "Deals," and as a result of this A/B test, the final conversion decreased by 35%. They reverted it back to "Sale," proving the importance of testing these changes to see the results firsthand.
The last but not least copy test you should constantly conduct is testing your value propositions. KissMe.com, a dating service, wanted to see which message worked best for first-time visitors to their website to encourage account registration. They compared "The Easy Way to Find Your Love," "Serious Dating," and "Just Find Your Love." Surprisingly, "Serious Dating" worked better than "The Easy Way," though at the end of the day, it's all about love and A/B testing your value propositions. This demonstrates that the impact of language on business is not always evident, and you need to run these tests to see the results yourself.
Moving on to navigation, every driver can recall a bad navigation experience. Navigation is complex, especially on mobile, and I want to cover a few points about mobile-first navigation. Can you spot any difference between these and this? The bottom navigation is different. The first group is apps, and the second is websites. Apps were designed with mobile users in mind, whereas websites inherited top-level navigation from desktop versions. The question is if and when websites will adopt bottom-level navigation, as it's considered more ergonomic.
For example, holding a phone with one hand, you don’t need to adjust your grip to interact with the panel. This is generally a good idea for mobile, but you need to test it specifically for websites. Users might not be ready to recognize websites with this change. A great example is from a British fashion retailer, Metalona. They tested an app-like bottom navigation bar and found increased engagement with the basket, but decreased engagement with other elements, so they reverted to the original top navigation.
In navigation, also consider what else you can put at the bottom. A call-to-action (CTA) is part of navigation, and if you have one primary action you want users to complete, it’s a good idea to test a sticky CTA at the bottom. This is especially effective on mobile, where users are always aware of the next action. In some cases, limiting navigation to focus users on a single task can be beneficial.
For example, during checkout, limiting exit points and navigation helps users focus. Here’s an example from a large consumer electronics retailer, Nvidia. They redesigned their basket page, removing top-level navigation and creating a cleaner design. This resulted in higher final conversions and average order value.
Key takeaways:
Lastly, let's talk about landing pages. You've probably heard of the rule of three elements: a CTA, a value proposition, and visuals. Take a look at this landing page: it has all three elements, but does it work? You might not see it, but below the fold, there are benefits to signing up for Google Apps.
The key point is to ensure your landing page is fully optimised, not just visually appealing. This concludes the section on navigation. Always test mobile-first navigation and ensure your CTAs are clear and focused.
The information provided is crucial and well-written, but if it's buried too deep on a page, users may never see it. This leads us to the next point: breaking the fold in design and layout.
Designing the above-the-fold space in a way that makes it clear users need to scroll down to see more content is essential. This case study from Hundred Rooms, a vacation search aggregator in Spain, highlights this. They redesigned their hotel listing page to break the fold, making it immediately clear that it's a hotel listing page and not a page with just one hotel option.
Additionally, they removed the call-to-action "Reserve with TripAdvisor," realising it was too early to ask for such a commitment. They replaced it with "View Offer" and "Add to Favourites." As a result, their conversion rate increased by more than 50%.
Forms are the last thing I'll cover in this testing part. Lena mentioned earlier the importance of simplicity in checkout forms. Short and simple forms are crucial at checkout since they're the final hurdle before purchase. However, if you have forms earlier in the funnel, such as on your landing page, asking for personal information like email addresses too soon can deter users.
One technique to mitigate this is the breadcrumbs technique. This involves increasing the number of fields but breaking the form into steps. Start with low-threat questions like "What are your business goals?" or "How can we help you?" Once users are halfway through, ask for their email address to send the collected information. This method makes it easier for users to commit.
Wrike, a project management software company, used this technique. They compared a simple landing page with just a value proposition, a small form, and a call-to-action register against a more content-rich landing page. Users accessed the content only after completing a short questionnaire. The straightforward page had a higher conversion rate, but the quality of leads was better from the more content-rich page.
Key Takeaways for Forms
Here is the big checklist of things you can test. You can take a picture of it now, or you'll receive the slides at the end of the Conversions at Google event. Are we done with conversion rate optimization? No, it's not as simple as testing these elements. There are many more areas that need attention.
Understanding data is crucial but challenging. While my colleague Nathan will delve deeper into common mistakes companies make when measuring A/B tests, I'll stay high-level. Measurement is often a struggle, with people using terms like conversions and statistical significance differently. Learning statistics is essential because even trained statisticians make mistakes.
We're all human and have biases. We want our ideas to work and our variants to win, but that's not the right approach. We need to learn how to fail, celebrate mistakes, and learn from these failures. The goal of conversion rate optimization is to learn, not just to win.
We spend a lot of time talking to people—about 60%, according to the study. This is likely because of inefficiencies or disagreements on the basics. To succeed, you need to cultivate a testing mentality and change your organisation's culture and mindset.
UX designers often agree with us, but marketing departments may have different priorities, like featuring partnerships on the homepage. Balancing these interests is key to effective optimization.
In conclusion, conversion rate optimization involves understanding data, embracing failure, and working with people to change the culture and mindset of your organisation.
It looks like achieving UX excellence is not just the job of UX designers. Many stakeholders are involved, and they all have different priorities, which can hinder cross-functional collaboration. Let's take a quick look at some of these stakeholders and their typical concerns:
To overcome these challenges, fostering a culture where everyone communicates effectively is essential. Here are some practical steps to achieve this:
Design sprints are a methodology for applying design thinking to solve critical business problems. They allow teams to prototype solutions quickly and get feedback before full-scale production.
For example, my team hosted a design sprint in South Africa. 1Life insurance company participated and, within one day, developed a completely new prototype for their landing page. They implemented a concise form, brought the key call-to-action above the fold, added a value proposition, and used visuals effectively. As a result, their new prototype significantly outperformed the original, and they launched the new landing page within a month.
Another example from the same sprint involves Edgars, a large fashion omni-channel retailer in South Africa. They redesigned their homepage, a significant step for any retail company. They removed the animated carousel, moved high-level categories above the fold, and brought the call-to-action above the fold. The new version won the split test, and they launched it. This initiative helped drive online sales and optimise their entire value chain.
Key Takeaways
Product excellence is a culture, not a checklist. UX is not just the job of UX designers; everyone in the company needs to be involved and share responsibility. It's about taking pride in contributing to a great product and working for a great company.