Menu
Hi, and welcome to the Mobile UX Marathon, a series of weekly webinars by Google on improving user experience and conversion rates on mobile web. Today's webinar is titled "UX Best Practices in Mobile," and we will specifically delve into the basics of homepage and landing page design, exploring best practices relevant across all industries.
Please share your questions with us on the Mobile UX Marathon website. You can find a link to the website in the video description. Later, we will have a live stream session with Google experts in user experience and design, where we will address all your questions.
Before we begin, I would like to introduce myself. Hi, my name is Anna, and I am a User Experience Specialist at Google. My team works with companies worldwide, helping them optimise user experience on the mobile web.
Today, we will start by discussing some basics of homepage design, particularly focusing on the importance of creating a strong first impression. When a user lands on a page for the first time, they likely arrive with a specific intention, interest, or expectation. Studies show that the majority of users form an opinion about your product or service based on what they see above the fold. Therefore, it's crucial to prioritise the content you display in this area.
We believe that there are three key elements that should always be present above the fold:
Let's now look at how different industries apply these principles and discuss examples from travel, retail, and finance.
For instance, even a major brand like Booking.com ensures that their value proposition is displayed above the fold, reminding users that their service is about searching for destinations. They also have two main CTAs above the fold: the search widget for accommodation and high-level categories for other types of destinations. Exposing these high-level categories on the homepage, preferably above the fold, gives users a clear understanding of the wide range of services or products your business offers.
Looking further, the Coolblue example places their value proposition right next to the search bar—"Order before midnight and get free delivery tomorrow." This value proposition is consistently displayed throughout the funnel, from the homepage to the product listing and detail pages. This constant reminder of their key offering is a powerful strategy, and I highly encourage you to test it.
The main CTA for Coolblue includes an exposed search bar, a central banner, and an invitation to scroll down and browse high-level categories. Emphasising the search bar's visibility, rather than hiding it behind an icon, is a functionality that users with purchase intent will greatly appreciate.
In the example of KBC I wanted to draw your attention to the call to action (CTA) and discuss it a little bit. Every call-to-action button consists of four key elements: placement, shape, message, and colour. When these four aspects are aligned, you'll have an effective CTA button. I recommend A/B testing all four elements.
Regarding colour, the rule is that the more contrast you apply, the more attention the button will receive, leading to higher interaction rates. If you have just one key CTA per page, like in the example of KBC, you can afford a very bright, high-contrast colour. If you use multiple CTAs, consider using a ghost button design, which won't dominate user attention and allows other UI elements, like the navigation panel, to remain visible.
Now, let's talk about CTA placement—where you position it on the page. A great solution is to fix the CTA at the bottom of the page. If you have just one key CTA on your page, you want users to always have it in view. Fixing it either at the top or bottom of the page ensures it's always visible, with the bottom being more ergonomic for mobile. This is a more elegant solution than duplicating multiple CTA buttons throughout the page.
Here’s an example showing the importance of testing your CTA copy—the text label on the button. In a case study from the Hotels.com team, announced at Google I/O, they initially used the label "Book a Room." They found that users weren’t always ready to commit at that stage, so they changed it to "Check Availability." This met the users where they were in their journey, leading to better results. So, do test different text labels for your CTAs, along with their placement, shape, and colour. This is crucial for optimising your website’s conversion rates.
To reiterate, in the example of Booking.com, it’s very important to expose high-level categories of all services or products on your homepage, preferably above the fold. This helps create a comprehensive impression of your business and website functionality. If you only feature individual products on the homepage, you won’t be relevant to 100% of users, and it might come across as too pushy to some, especially first-time visitors. They may assume you only sell t-shirts, for instance, without realising you offer much more. Therefore, complement high-level categories with visuals, whether icons or photographs. Processing text isn’t something our brains are naturally inclined to do—it's a learned skill. However, recognizing images is an instinctive process that happens within the first second of seeing an object, making visuals a strong signal for the human brain. Always use images and A/B tests to find out which works best for your landing page design and audience.
If your website includes a search bar and it functions well, it should be a key CTA on the landing page. Design it to stand out prominently. Tests show that the more visible the search bar is, the more searches and clicks you’ll receive. Users who use search often convert at higher rates than those who don’t, as they typically come to your site with a specific intent or idea of what they want to buy. These users often cost more to acquire, so it’s crucial to provide them with excellent search functionality and ensure it's prominently displayed.
Lastly, let's discuss carousel banners on homepages. Many companies place carousels or promo banners above the fold, often with automatic rotation. However, this isn’t usually a great user experience; it's forced content exploration. We often find animations distracting and perceive animated banners as ads. Even if a user is interested in a banner, it might move away before they can explore it further. Statistics show that the first banner usually gets the most interaction, while the rest are often ignored. A better solution is to disable automatic rotation and let users control the carousel. Allowing user-initiated exploration enhances engagement, which is valuable in the UX world. For example, bhinneka’s mobile website design is consistent across devices, and they let users control the carousel of banners, providing a much better homepage experience.
That’s it for now. You can find more resources on landing page design, including talks from the Google Conversions Conference, which we host twice a year at our European headquarters in Dublin. My colleague, Lina Hansen, has also created an excellent course on conversion rate optimization called "Winning on Mobile," which I highly recommend, especially the sections on UX best practices and testing value propositions.
As mentioned earlier, we will have various live streams following up on these pre-recorded videos. In the live stream on May 14th, we’ll discuss UX case studies and showcase more examples of A/B tests conducted by different companies and Google on mobile websites. We hope to have enough time to answer all your questions, so please submit them in advance on the Mobile UX Marathon website, or during the live stream itself.
That’s all for now. Thank you so much for watching, and I’d like to remind you to use our hashtag on social media if you want to post anything about this course. Thank you, and I’ll see you in May!
%2B(1).png)
