<img height="1" width="1" style="display:none" src="https://q.quora.com/_/ad/ad9bc6b5b2de42fb9d7cd993ebb80066/pixel?tag=ViewContent&amp;noscript=1">

User Experience Guide

Mobile site search and navigation design

Download the PDF Version

lady browsing on phone


A mobile device has limited screen real estate, so the most relevant information must be shown first. Considering 40% of mobile consumers will leave a page if it takes more than three seconds to load, businesses must ensure the mobile user experience (UX) of their website delivers.

Studies show that mobile consumers are more likely to be impatient. They are looking for something specific and want to find a product in the least amount of clicks as possible. Additionally, 59% of smartphone users feel more favourable to mobile websites that allow them to make purchases quickly. So, designing your mobile search and navigation with UX in mind is essential.

Lady on phone

Mobile site or app?

No matter if your company benefits from having a native app or not, it’s now a necessity to adapt your website for mobile. In September 2020, Google launched mobile-first indexing as the default for the popular search engine. This means Google will use the mobile version of your website to rank pages. To benefit from this, businesses should focus on developing ‘responsive web design’.

Top tip: An app should offer something your website can’t. If this isn’t the case, a mobile-friendly website is the best choice.

Responsive web design allows pages to adapt to any user device automatically, while the search engine can simultaneously crawl and index all your content. This provides the perfect combination of user experience and functionality, so there’s no need to design separate sites for every device. Additionally, responsive websites can be deployed in a couple of days, saving time, money, and maintenance costs that come with creating an app.

desktop and mobile screens

Mobile vs. desktop website

Here are some worthwhile considerations to remember when creating your mobile website:

no mouse pointer

No mouse pointer

There is no mouse pointer on mobile, and clumsy fingers are more likely. There must be a certain distance between links and buttons so mobile users don’t click the wrong link by accident.

Top tip: Spacing between clickable elements need to be a minimum of 2x2mm. The minimum hit area is approximately 7x7mm.


Less context

Mobile websites have less context. It’s key to have each label name and header written in clear and unambiguous terms so the user can easily understand them.

Top tip: To make your mobile website easier to understand, combine text and icons.

no hover states

No hover state functionality

There is no hover state interface on mobile. This means that the interface must make it clear what is, and what isn’t, clickable. Or, the user can learn via trial-and-error – a sometimes acceptable trade-off that is frequently used in games or productivity apps.

search box

The search box

Site search plays a vital role in m-commerce. Navigating through thousands of products on mobile isn’t as easy as it is on desktop – and there’s only so much you can fit on a five-inch screen. This is why mobile users choose to use the search bar, so the site search experience you provide must be smart enough to deliver the right results. Additionally, your site search must account for taxonomy that is used or spelling mistakes that often result from error-prone thumbs typing on small keyboards.

standout search box

Make your search stand-out

Ensure your search box stands out graphically and is visible. A full-length search-bar is preferable, with an open text field followed by a search button.

search bar placement

Perfect your search bar placement

Show the search bar on every page, except for the checkout, so the user doesn’t abandon their cart.

sticky search bar-1

Make the search bar sticky

‘Pin’ the search box to the header, so that users can easily refine their search or make a new search after scrolling down the search results. Alternatively, include a “back to top” arrow.

prompt text

Include prompt text

Include helpful, prompting text in the search box. For example, ‘search for products or brands’. This text can disappear automatically when the user starts typing.

Consider navigation menus

Make sure your navigational menus do not cover the search box.

Top tip: The magnifying glass icon is a universally recognised symbol, and so your site search should always include it.

Overcome limited space

If you don’t have enough space for a search box, use a magnifying glass icon as a last resort. This icon needs to visually stand out and be ready for input as soon as the user taps it. However, we advise against going icon-only, as a/b tests show that the number of searches increases by around 15% with an open search bar.



The value and impact of the user search experience are formed by the way that autocomplete suggestions can assist and guide users to better search queries.

Poor autocomplete suggestions can lead the user on a detour, destroy the experience, or force the user to abandon their search journey altogether. Good autocomplete is especially important on mobile, as it’s harder to type on a digital keyboard. Ideally, you want to keep the number of keystrokes to a minimum.

remember queries

Remember each query

Keep the search box populated with the visitor’s search query. This allows the user to narrow their search without having to go back or recall what they previous searched.

highlight differences

Highlight differences

Rather than highlighting what the user has already input, consider highlighting the differences in the search.

searchable keywords

Suggest searchable keywords

Use autocomplete to suggest searchable keywords for every key pressed by the user after two letters are typed. Limit the rows of suggestions to 4-8 on mobile, to minimise the user input.


Include scopes

Scopes allow the user to narrow their search options while searching. Think of scopes as the aisles of a store.

  • Consider highlighting scope with a unique colour.
  • Include “In” so it is obvious that it’s about the scope and not within the query suggestion.

personalise search history

Personalise search history

Consider indicating previous search history through a distinct style to help users quickly access relevant information. If the user has never searched on your website before, then include a “Top Searches” placeholder.

Top tip: Use manual search scope selectors for large and varied catalogues only. Always set default scope to “all” and make it visually secondary to the search field. Additionally, it is preferable to use a drop-down menu.

category navigation

Category navigation

When adapting your website for mobile devices, it is tempting to overcome the limited screen real estate by using a ‘hamburger’ menu for your main navigation. However, even though site search plays a prominent role on mobile, category navigation is vital for signalling the breadth of your product range, inspiring customers to browse new products, and guiding users towards the right terminology to search for.

There is no one-size-fits-all approach for structuring your categories on mobile. Whatever design choice suits your eCommerce store best, make sure to give your users visual clues on how to navigate to the products they are looking for.

product categories

Show-off your product categories

One of the best ways to give visitors an idea what your store is about is visually featuring at least 30-40% of your main product categories on the homepage (i.e. the first level of product categories).

narrow down nav

Narrow-down your nav

Because it’s easier to get lost in navigation on a mobile website, limit the levels of navigation to a maximum of three.

Signpost for your user

Visually distinguish main from sub-navigation, and make sure your users can locate where they are in your navigation structure. This is vital for users that have not navigated to a certain page themselves, and have instead landed on it through external links or advertising.

Include tabs

Use tabbed navigation if your site structure allows it. Users are more likely to interact with what’s already in front of them.

Create clear categories

Categories should be clear with no overlap. Do not confuse filterable product attributes or product ‘states’ with categories. For example, Best Sellers, Sales, Gifts, Just Arrived, or Brands. Categories are mutually exclusive, while filters are not.

Top tip: As a rule of thumb, if there are less than 30 items in the category, use it as a filter instead.

Inspire users

Inspire your users

Use thematic navigation with pre-filtered lists, such as ‘New Arrivals’ or ‘Women’s Fall Jackets’. While these might look like categories, don’t make these attributes categories in your data structure. Doing so will severely deteriorate your search and recommendation engines.

Top tip: Thematic browsing is often neglected on mobile because of the limited screen real estate. However, it can look like guides, finders, or content linking to popular products. If you chose to make them look like categories, make sure to visually separate them to make scanning through the navigation easier.

Allow search within the product category

Allowing ‘search within’ behaviour provides users with more relevant results within the context of their current search. For example, if a user has searched for ‘camera’, they can then search for ‘7MM’ and your search engine understands the context. Rather than searching for ‘7MM’ site-wide, the user gets results that are relevant to ‘camera’.

How to cater to ‘search within’ behaviour:

  • Suggest the currently navigated path in the auto-complete suggestions.
  • Have a scoped search field.
  • Collapse the site-wide search field behind an icon and then provide a dedicated search-within field.
filters and facets

Filters and facets

Faceted search provides a service by removing your shopper’s keyword responsibilities. For those users who aren’t sure what they want, it outlines some of the attributes they might want to consider and offers suggestions on their search. While for those who do, it narrows-down results by what’s important, without limiting user choice to exactly one item.

Filters use certain product metadata as visible criteria visitors can use to refine their search queries. Faceted filters take it one step further and allow users to narrow results by several different dimensions simultaneously.


Make filters eye-catching

Display the filtering option on the product listings page in a way that stands out to the customer.

Top tip: Truncate lists of filtering values after the tenth attribute, so that the customer does not lose their overview of the filtering options and get lost in endless scrolling.

Use sorting and filtering options

Where appropriate, provide a combination of sorting and filtering options. There’s no need to get fancy, display commonly used product attributes first and use differentiating product attributes as facets, such as:

  • Obvious site-wide attributes like price, brand, category, product variations and user ratings.
  • Attributes that accurately evaluate which of the products in the list are of relevance.
  • Attributes that enable the visitor to compare relevant products to one another.
  • Attributes that can be consistently included and presented across products in the same list.

Use dynamic facets

Dynamic facets change according to the context and adapt filters for each query in real-time, as the user interacts with their search results. Irrelevant filters are removed automatically, and new filters appear when they become relevant to user actions.

Top tip: If users are rarely clicking on a facet, consider replacing it with a more useful option, or removing it altogether. Regularly refining your faceted search based on user data is best practice.

product list layout

Product list layout

Mobile has limited “screen real estate”, which means fewer search results can be shown at once, and search accuracy becomes much more important than on desktop. Additionally, you also need to provide the customer with relevant information in the product listings to make it easy to compare results.

Designing search result list items is a balancing act of including the necessary product attributes that the vast majority of users will need, without overloading the list with so much information that users get discouraged from exploring.

power of personalisation

The power of personalisation

Use personalisation to make sure the most relevant product appears first for search and category navigation.


Design for your needs

Depending on if the types of products you are selling are more visually or spec driven, design the product listings as grid or list. If your site’s product catalogue is a mix of both visually and spec-driven products, you will need to design two different search result layouts.


Tips for product thumbnails:

  • Have thumbnails for all list items. No thumbnails can confuse users as they may perceive the item to be unavailable.
  • Make it clear what’s included in the list item price. Otherwise, users will assume everything in the thumbnail image is included.
  • Thumbnails should dynamically change to display the relevant variant, based on the search query.
  • Provide interactive swatches for users to preview different colour variations in thumbnails. Users see which options are available and can quickly compare different items.
  • Consider having both ‘use context’ and ‘cut out’ thumbnails available. Use the same type for all products in the list view.
  • Be aware of only showing products in packaging. It can be helpful if the packaging is more recognisable than the product itself.
  • Aesthetically identical products should use the same thumbnail, otherwise, users will try to compare them visually.
  • Synchronise and group all elements which lead to the same path. This will help users understand where the interactive element will lead them.
  • Define distinct hit areas in product lists or make each list item one big area.
naming products

Naming products

When naming your products, users should get sufficient information to distinguish it from alternatives just by reading the title. This depends on the item you are selling, whether it is a well-known brand or your audience’s knowledge about the product.

green top

Include item price

An item’s price is an essential datum that should always be included in the product listing page. Other fundamental attributes include the title, product type and variants.

Get specific

Depending on the product category there are key attributes besides manufacturer and model customers look at when deciding whether or not to click on a product. These could be added to the product title as well. For technical equipment, it could be the dimensions; for clothes, material or cut; and for toys and games, suitable age.

Top tip: If you are the brand, and have a webshop for your products, you don’t have to start every title stating your brand. Onsite, this information is obvious anyway and when having the titles in PPC campaigns, the brand will be visible in the ad anyway.

loading products

Loading speed for products

Loading speed is crucial on mobile. If a site takes more than three seconds to load, the potential buyer is likely to abandon it. Also, Google punishes sites that take too long to load and might not list them in their search results.

How to improve loading speeds:

  • Show the total number of products in the list at the top.
  • Don’t interrupt the user’s search flow with pagination. Use the ‘load more’ button or infinite scrolling.
  • Use the ‘load more’ option when complementing your search results with the Loop54 exclusive feature Related Results.
  • The default number of items to load at once is 15-30 for mobile. Don’t give the option of choosing how many products to load. Use a dynamic number depending on the relevance score of search results instead.

Top tip: Lazy loading is a common technique to use so that some results will be displayed while the rest are being loaded. This way, pages load quickly because very few products are loaded initially. For lazy-load of products, it’s good to show the text of the products first, so impatient users can scan for target products without waiting for all images to load.

Take mobile search and
navigation further with Loop54

mobile shopper

Shoppers expect the same level of relevance and personalisation online as they experience in-store. Powered by Machine Learning and built exclusively for eCommerce, Loop54 delivers that exceptional online shopping experience for both mobile and desktop users.

  • Automated: Automatically learns words and merchandises search and category listing
  • Relevant: Interprets search intent to deliver truly relevant results
  • Personalised: Sorts results according to popularity and personal taste

Request a demo today!