Menu
Hi and welcome to the Mobile UX Marathon, a series of weekly webinars by Google on how to improve user experience and conversion rates. Today’s webinar is called "UX Best Practices in Mobile," and we will specifically cover best practices for navigation, search, filters, and product lists and pages in general.
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 on, we will have a live stream session with Google experts in user experience and mobile design, where we will try to address your questions during the live stream and the Q&A session.
Before I begin, I’d like to introduce myself. Hi, my name is Anna. I am a User Experience and Design Specialist at Google. My team is based in Dublin, and we work with different companies worldwide, helping them understand the best practices in mobile that work really well.
I would like to start today with navigation. It’s crucial to build the structure of your navigation with a clear strategy in mind, and to analyse data to understand which navigation items users interact with the most. You might also consider working with your team and engaging in design thinking exercises to brainstorm the optimal setup for your website and how it might differ from your app—or if it even should.
First, you will probably have a top navigation panel since this is the main navigational element on mobile web nowadays, carried over from desktop designs. Let’s discuss how you can enhance this navigation element or potentially change it. I will refer to a few examples from Google Material Design and some case studies we’ve conducted with different companies.
One thing you can test is making the top navigation panel sticky, so it stays at the top of the page as users scroll. This was tested by Matalan, a British homeware and fashion retailer. They aimed to improve how users navigate content and enhance findability. In this iteration, the navigation bar was always available to users, no matter how far down the page they scrolled. The result was a 10% increase in total interactions with the navigation and a 5% increase in checkout starts, which was a great success for the team, and they implemented it on their website. This is an A/B test that I highly encourage you to try.
Another option to consider is adding top tabs to your navigation panel. This is especially useful if your users would benefit from frequently switching between similar groups of items. Top tabs are an excellent solution for presenting so-called "peer data sets." These tabs could be used on product listing pages as filters or to navigate between subgroups. The tabs can be fixed or scrollable, depending on the number of items or subgroups you have. Fixed tabs maintain the same width for each tab, while scrollable tabs can vary in width.
The navigation drawer is appropriate when you have five or more top-level destinations. It’s a great solution for maintaining consistent navigation across different device sizes—desktop, mobile, and tablet. Unlike top tabs, the destinations in a navigation drawer can be unrelated, such as including login functionality or listing product categories. However, be mindful that using a navigation drawer reduces the visibility of destinations by hiding them under another tab or icon, which users might not always recognize. Therefore, it’s best to use the navigation drawer for secondary functions—those that are important but not used frequently. For primary functions, it’s better to expose them in the top or bottom navigation panel.
Bottom navigation is a really great solution for mobile devices, providing access to at least three but not more than five destinations. This navigational element is designed specifically for mobile devices, appearing at the bottom of every screen. The elements in the bottom navigation bar should be of equal importance. For example, if users need to switch frequently between these equally important elements, the bottom of the page is an ergonomic location, easy to reach on any mobile device.
Originally, bottom navigation bars came from apps, which were developed with a mobile-only user in mind. The question now is whether all mobile websites will eventually adopt bottom navigation, and whether this solution will work for your specific audience. Testing is crucial to determine if your audience is ready for this and how well it works for your website.
Another important point is the clarity of navigation, where text labels can be incredibly helpful. It’s best practice to add a text label to every single icon on your website. Clearly label what each icon does because icons can be easily misinterpreted by users with different backgrounds and experiences. A case study from the Google Translate team showed that simply naming features in the UI increased engagement. Previously, users were unsure what a particular icon represented, but after adding text labels, it became clear, and engagement improved.
Next, we’ll look at best practices for search, where it’s crucial to capitalise on the user’s momentum and provide excellent functionality, especially for those who already have a purchase intent and know what they’re looking for.
First of all, what you can do to improve your site search is to show popular search suggestions as users begin typing. This helps users decide whether the keyword they're using is correct or if they need to adjust it. They can also simply click on one of the suggestions without typing any more characters. This is a great feature that enhances the user experience.
Another helpful feature is displaying the number of items for each category in the search suggestions drop-down. However, be careful and test this, as it can sometimes overwhelm users with too much information, preventing them from completing their search.
It's also important to allow users to easily delete their search query by adding a small 'X' at the end of the search bar. This is a simple and quick fix for your website but is often overlooked by many companies. For example, CaratLane has an excellent search function that suggests search terms based on popular searches, and their search results are easy to scan with prominent filtering options. You may want to check out their website.
To further improve your search functionality, it’s important to help users perform the correct search. For instance, analyse what users type in real-time and, if an item isn’t available, show them similar suggestions. Additionally, if a user searches for a keyword that returns no results, you should never return an empty page. Instead, display popular items or other navigation elements like a “Get in touch with us” option.
Another common situation on mobile devices is that typing can be difficult, leading to mistakes. Therefore, it's crucial to validate what users enter in real-time for misspellings and match those with your product range. This is a simple fix that can greatly improve the user experience.
Sometimes, users have to tap the search bar or icon twice—once to activate it and a second time to start typing. Ensure that the keyboard opens immediately after the first tap, and that users can already see some search suggestions. This creates a smooth experience.
When displaying suggestions, you have two options: if users have searched for something recently, show their recent searches. This is extremely helpful as it aids in product recall, increases sales, and helps users access relevant information quickly. If they haven't searched on your website for a while, show popular searches or top products currently being promoted.
Now, moving on to filters, which are essential for how users interact with product listing pages and navigate results. The first suggestion is to update the number of results in real-time when filters are applied. This helps users make informed decisions as they adjust filters.
If you have a lot of filters, you might consider allowing users to select the filters they want to apply first, and then update the product listing page afterward. In cases where there are many filters, a pop-up window that displays all filter options visually is a good solution.
Here are some design rules for pop-up filter windows:
You can also experiment with sticking filters to the top or bottom of the page, ensuring they’re always available as users scroll. Alternatively, display quick access to popular filters. On the product listing page, it’s helpful to show the number of results returned and the currently applied filters. This gives users the opportunity to change their search query or adjust filters as needed.
Another important aspect of interacting with product listing pages is allowing users to add products to their favourites directly from the product listing page. This is especially beneficial for returning users, who may want to revisit their wishlists. Ideally, users should be able to do this without requiring registration.
To make it clear that a page is a listing page and not a product detail page, ensure that more than one item is displayed at once. For example, Hundredrooms, a vacation rental search aggregator in Spain, redesigned their hotel listing page to make it obvious that it was not just a single hotel option. They also tested different calls to action and found that not rushing users into commitment increased conversion rates by 52%.
Including product reviews on listing pages can also increase credibility. Customers tend to spend more on websites with excellent reviews, so start collecting customer feedback and display it as social proof on your product listing pages.
When it comes to navigating through product listing pages, infinite scrolling is not ideal as it offers no user control and can be unexpected. Pagination is better, as it indicates how many more pages there are to explore, allowing users to decide if they want to continue. However, pagination can be tricky to tap on mobile devices, and users may struggle to remember which page they found a product they liked. A "Load More" button can work well on mobile devices as an alternative to pagination. If you implement this, it’s a good opportunity to display the number of remaining products in real-time.
Lastly, displaying real-time information such as product availability, popularity, or discounts can help users make informed decisions. It's essential to balance this from a design perspective and prioritise what information and calls to action should be shown on product listing pages.
That concludes our session on navigation, search, filters, and product listing pages. Here are some resources for further reading, which you can also find on the Mobile UX Marathon website. I encourage you to check out the course by my colleague Lina on clarity, urgency, relevance, and distraction—key factors in designing product listing pages.
Don't forget that we’ll have a livestream session as a follow-up to these video recordings. Please join us across different time zones and ask Google experts any questions based on what you’ve heard today or studied on the website and in the resources. We hope to address all your questions during the session.
Thank you so much! I also want to remind you to use the hashtag #UXMarathon on social media to share your thoughts about the marathon. This helps us see what the world is saying about us. My name is Anna, and I hope you enjoyed this session on mobile UX best practices. Please check out the next webinar, where I’ll cover product listing pages, checkout, and forms. Thank you!
%2B(1).png)
