Menu
Hello everyone,
It's a pleasure to be here with you today. I hope you're enjoying the amazing presentations and looking forward to the evening part and the coffee break as well.
My name is Anna, and I'm a User Experience and Design Consultant at Google. My job is to help you improve user experiences and conversion rates on your mobile websites. I will be sharing some best practices, A/B test suggestions, and a bit about design, a topic very close to my heart.
I work as a UX consultant at Google. In my free time, I draw, illustrate books, and work in virtual reality. As an artist, I strive to create strong visual identities and unique experiences. However, in my daytime job, I focus on providing consistent user experiences and maintaining visual uniformity.
This creates an internal conflict, one I often see in the companies I work with. Designers aim to create beautiful, unique interfaces, but designing for the web often requires following best practices and industry standards. So, how do we create websites that are unique yet still recognizable and effective? How important is the visual aspect of the interface, and when can we start being creative?
Let’s look at the difference between UI and UX. As designer Daniel Schwart puts it, "UI is how you interact with the product—how you read content, click, and respond— UX is the resulting opinion/emotion felt by the user." UI is about how things look, while UX is about how things work and whether they effectively serve the user. Does the website feel fast or slow? Does it make us feel happy or frustrated?
Let’s first consider the visual aspect. As a UX consultant, I can confirm that visual design is still crucial. Good visual design makes things look intuitive and obvious, helping people recognize and interact with content more easily. For example, in the past, Google products had inconsistent design and user experiences. We developed design guidelines to create a cohesive experience across all platforms. You might already be familiar with what I’m referring to.
We developed and published the components of Google Material Design online, based on three key principles: tangible surfaces, meaningful motion, and the classic traditions of graphic design. We believe these principles help build intuitive interfaces and make it easier for users to understand how to interact with content. Each UI element is designed as if it were a piece of digital paper, responding to user actions and interacting with other elements as physical materials would.
We realised that these guidelines could benefit not just Google but other companies as well. We published them online for everyone to use, helping you create beautiful and unique experiences while adhering to visual design best practices. This way, you can save time and resources by not reinventing the wheel and focus on solving more complex business problems. The flexibility of Material Design also allows for creative expression of your brand.
Of course, you should aim to be creative and achieve a unique look and feel for your users, but only after ensuring that your designs are recognizable and follow best practices. Study existing design languages and incorporate them into your work before adding your creative touch. Whenever you have a creative idea, such as a new design for your menu button or another interface element, you should always test whether it works effectively. The best way to do this is by conducting A/B testing.
You’ve heard about A/B testing multiple times today, and you'll hear even more about it. We’ve learned that A/B testing is the only way to be absolutely sure you’re making the right decisions. To illustrate this, imagine an A/B test on a mobile site where 50% of the traffic sees a version of the website with a blue button and 50% sees a version with an orange button. The only difference between the two versions is the colour of the button. Now, I’d like to ask: which button do you think had the better click-through rate? If you could, please raise your hand if you think the blue button performed better. (A few hands go up.) And now, raise your hand if you think the orange button performed better. (More hands go up.)
In this case, the orange button performed better. But what I wanted to illustrate with this example is that opinions on such matters can vary widely. People’s preferences, past experiences, and assumptions can lead to different conclusions. When it comes to UI or UX design, elements like button colour might seem subjective, but they don’t have to be. Instead of arguing about which colour is better, you should conduct A/B tests to determine what actually works.
Remember, the success of the orange button in this instance doesn’t mean it will always be better than blue for your UI. That’s why it’s crucial to study best practices and case studies but always validate your decisions with A/B testing.
Now, moving on to the fun part with the screenshots, let's discuss the basic principles of UX design. What are the key elements that work for users, and what should you include on your landing page? About four years ago, we published a set of 20-25 principles for mobile site design (see the old logo up there; it's no longer in use). These principles have served people well in designing their websites. However, we wanted to push our vision for mobile web design even further.
Around the same time, we established the Google Mobile UX Consultancy Team here in Dublin. To date, we have completed over 500 conversion rate optimization projects with various companies. I’d love to discuss each of these projects, but unfortunately, I don’t have the time today. Instead, I’ll share some key learnings from our work.
We use a conversion rate optimization framework to analyse our clients' websites, which you can see here. This framework has four key pillars:
Today, I will focus on the "Attention" part, as it is crucial for homepage and landing page design. At the end of the presentation, I will also provide links and checklists with additional recommendations.
When it comes to your homepage and landing page, first impressions are crucial. Imagine users arriving at your landing page for the first time—they likely come with certain expectations based on where they originated from. Studies show that most people will decide if your website meets their expectations based on what they see above the fold. That’s why it's extremely important to carefully consider what you place in this area.
Based on this, we believe there should always be three key elements present above the fold:
To illustrate, let’s look at an example from another industry. The website in question features a prominent CTA in a contrasting colour that immediately grabs attention.
In this pitch, I can highlight how effective visual support can be in presenting your value proposition, particularly in the context of mobile banking. A recent example I like demonstrates how you can structure your value proposition using two or three key bullet points to make them stand out for different B2B services or products. The value proposition can be more comprehensive, consisting of a headline, a sub-headline, and sometimes additional elements like "No credit card required" or "Free trial for the first month." These boosters help alleviate user anxiety and reassure them that there’s no risk in clicking. To sum up, the three essential elements for creating a strong first impression are: a clear value proposition, effective CTAs, and compelling visuals.
Let me walk you through these points quickly. The value proposition is crucial and should be tailored to resonate with your target audience. For instance, we worked on optimising user experience for Kismia.com, a dating website. They tested different value propositions for new users, with the goal of encouraging account creation. Initially, they tested "Easy way to find your soulmate," which didn’t perform well. Then they tried "Serious dating and communication," which showed better results. However, the most successful proposition was "Find your true love today." This illustrates the power of A/B testing in refining your value proposition to match user expectations.
Next, let's talk about the Call to Action (CTA). The CTA involves four key elements: shape, message, colour, and placement of the button. Each of these should be A/B tested to determine what works best for your audience. When it comes to the colour of your Call to Action (CTA) buttons, contrast is key. The brighter and more contrasting the colour, the more attention it will attract, leading to higher click-through rates. If you only have one CTA per page, you can afford to use a bright colour. However, if you have multiple CTAs, like John Lewis, consider using a more subtle design, such as a ghost button. This approach prevents the CTA from overwhelming the user and allows other important elements, like high-level categories or the top navigation bar, to remain visible.
For CTA placement, if you have only one key action per page, you can position it either at the top or bottom of the page. Placing it at the bottom can be more mobile-friendly since it aligns with how users naturally hold their devices with one hand. Regardless, you should A/B test all placement options to determine what works best.
A good practice, especially for long pages, is to make the CTA persistently visible. This way, users are always aware of the action they can take, without having to scroll back up.
Search functionality is another crucial CTA. The more prominently you display the search bar, the more clicks and searches you’ll get. Studies show that users who use search features often have higher conversion rates. These users come to your site with a clear intent and a specific idea of what they want to buy. Therefore, providing an excellent search experience is essential. Display the search bar prominently and use design to emphasise it.
In addition to focusing on CTAs, make sure to analyse your Google Analytics data to understand which actions drive the most revenue. Highlight these key actions with effective design to ensure they are easily noticeable and accessible to users.
Finally, let’s discuss the importance of visuals. Never underestimate their power, regardless of your industry—whether you’re in finance or B2B services. Visuals are crucial for supporting your value proposition.
For example, a project management software company tested different landing pages, each with unique visuals and marketing messages. The goal was lead generation through these landing pages. They created separate pages for each message, including:
The performance of these pages varied significantly in terms of exit rates and bounce rates. This highlights how important it is to support your value propositions with relevant visuals, as they effectively communicate your message.
Always ensure that your visuals are purposeful. While abstract images can be effective, images of people often create a stronger emotional connection and build trust. If you choose to A/B test images of people on your landing page, be mindful of a psychological effect: when users see a human face, they naturally follow the direction the person is looking. You can leverage this by placing important information or calls to action where the person is looking, guiding users' attention to key areas of your page.
Bluehost uses visuals very effectively on their landing pages. When I visit their site, the first thing I notice is the image of a person. This is because our brains are wired to focus on images first, interpret them, and then read the text. After noticing the image, I naturally look at the value proposition, such as “Best Web Hosting” and the discounts offered. This often leads me to click the green button.
This psychological pattern highlights the importance of using images of people on your landing pages. Lina mentioned the significance of displaying high-level categories of your products or services. It's essential to illustrate these categories with visuals, such as pictures or icons. However, whenever you use icons or visuals, always complement them with text labels. This practice helps avoid misinterpretation, as people have varying levels of web experience and may interpret visual elements differently.
Regarding page length and personalization, these are common questions. Should you use short or long landing pages, and how much content should be included? Unfortunately, there’s no one-size-fits-all answer.
The effectiveness of landing page design often depends on the key metrics you’re measuring. For example, a team compared two landing pages: one was very short, featuring just a value proposition and a call-to-action to register, while the other was much longer and required users to answer a few questions before accessing the content. For instance, if a user identified as a marketer and wanted to see how they could help their team, they would be redirected to a relevant section of the page that answered their specific questions.
The results showed that the short landing page had a higher conversion rate because it was straightforward, leaving users with no option but to submit their email address. However, the longer landing page yielded higher-quality leads. Users who engaged with the content and found specific answers to their questions demonstrated greater interest in the product and potential collaboration.
Ultimately, it’s not just about the quantity of conversions but also about the quality of the leads and other business metrics, such as average order value.
To sum up my presentation:
For further testing suggestions and recommendations, refer to the provided link. Please utilise these resources and test your ideas thoroughly.
People may become more confused if changes are not carefully considered. A/B testing helps ensure that improvements genuinely enhance the user experience and positively impact key metrics, rather than redesigning for the sake of redesign. Thank you.
%2B(1).png)
