Great mobile search is table stakes. This year, before COVID struck Europe and the Americas, 66% of internet users used a mobile phone or tablet to buy. [Datareportal]

Users are deeply resourceful, and rightfully finicky too. With so many brand and product options available, they expect in-app search that’s fast, responsive, and easy to use. But achieving this goal is easier said than done.

Smaller screens, even smaller virtual keyboards, and connectivity issues make mobile search design inherently different from the desktop. Fortunately, there are mobile UX best practices — from your app’s search bar to your search result UI — that you can deploy to build great mobile search.

3 key elements of great mobile search UX

1. Your mobile search bar (and the alternatives)

This step is simple but crucial: consider where to introduce search based on your user needs. There are, generally speaking, three options: the full length search bar, part of the tab bar, and a simple icon.

The full length search bar typically appears on the main screen, giving instant access to the search feature. If your product or app revolves around giving your users quick and easy access to a lot of content, then the full mobile search bar is the way to go. Search becomes the center of interaction with your content or products, and will take over the screen once the users start typing. If you are using the full search bar, make sure that the search is prominent!

The tab bar is a good solution when search is not the main access point for your content, but you still want to give users easy access to search capability, no matter where they are in the app. Spotify, for example, favors content shelves with recommendations and curated lists on the home screen, but when the user wants a specific tune, they have quick access to search.

The contextual search icon is the most flexible approach: you display the button in the part of the app that makes sense for searching. However, it’s also a huge tradeoff, particularly in e-commerce, as the pattern chosen will decide how much users will interact with search itself (and search users tend to convert better).

2. The in-between search screen

Once you’ve determined where search starts for the user, the next UI element to design and optimize is the search screen. This screen serves as the transition between the main ‘non-search’ view and the upcoming search result page. The search screen is displayed as soon as the user taps the text input in the search field or the search icon, telling the app: “I’m looking for something and expect to be rewarded with useful information.”  As we know, each tap is painful, so we should gratify the user’s efforts. Here are three design options using the search screen to guide the user’s inquiry.

Recent searches: When a user searches for a product, it’s great to offer them a quick glance at previous searches for comparison or as a reminder.

Trending searches: In this screen, the user is shown what other users are most looking for in the app. This helps an uninspired or casual shopper to discover content easily by clicking a suggestion.

Categories: This search screen guides the user with a number of filter options to define and refine the search, greatly speeding up and simplifying the search process.

Query suggestions

With query suggestions, the user doesn’t see immediate results upon typing a query, but instead is shown a series of more complex, popular or relevant queries based on the input. For example, if the user types “iPhone”, the suggestions displayed could be “iPhone case”, “iPhone cable,” “iPhone charger,” etc.

A great use case for query suggestions is searching through a huge data set. Amazon is a great example: users can easily be overwhelmed by the sheer volume of possible search results – guiding them with suggested plausible queries will speed up their time to relevant content and thus purchase.

Instant results

Another option is to fetch actual results with each keystroke, and display them on the result page. This approach is most effective when the data set is either more limited, and the user has a more definitive idea of what they’re looking for. In the Spotify example, because of the product’s nature, the search results will be limited to the realm of albums, songs, playlists and artists — which would make query suggestions cumbersome and counterproductive

Bonus tip: a good approach, as in the Spotify example, is to show a limited set of hits per type of content (5 artists, 5 bands etc…). The most relevant results will appear in the 5 “firsts”, allowing the user to have a quick overview of matches on different types, and you can add a “show more” button to allow the user to dive in by category.

Combination: query suggestions + instant results

The last option to consider is a combination of both strategies. When you have a very large dataset and want to guide your user with suggestions, and are also able to determine if a good match has occurred, then mixing it up works great. In the Google Play store example, we see an actual instant result above multiple query suggestions.

That’s a great strategy here, as there are millions of apps that another query could match, but also a high degree of confidence that the “airbnb” query will match a concrete instant result.

3. The mobile search result screen

The final and critical component of mobile search UX is the screen where users are presented with their search results. Let’s dive into best practices for this critical element.

Mobile search UX best practices

The ultimate goal of mobile search UX, of course, is to provide a fast, smart, and easy to use search experience for the mobile platform user. We’re all spoiled by Google’s ultra-high performing search engine and Amazon’s autosuggest, personalization and recommendations features. This makes it incumbent for search everywhere  — including mobile web and in app search — to address user expectations set by the big players.

Obstacles to great mobile UX

1- Tiny screens
Most difficulties developing the mobile search UI come from the extreme limitation of screen space to display information. A common mistake is wanting to display all the data at hand, á la the desktop experience. With mobile, the number 1 rule for data display is “less is more.”  How many results you display and how much information you provide about each result is the difference between information overload and a good user experience.

2- Physically harder information input

Sure, we’re in the age of voice search, but for the most part, users are still tapping away on their tiny keyboards with 2 thumbs instead of 10 fingers, with every tap getting exponentially more cumbersome. Virtual keyboards are crammed, uncomfortable, and prone to typing mishaps, leading a high probability of user frustration by zero results. Add to that the fact that mobile is often used in less than optimal conditions — on a shaky train, while walking…Information input on mobile UI is inevitably drastically impaired.

3- More complex information input

Apps strive to provide the most frictionless UX, with a minimum of taps, scrolls, and inputs. Search isn’t that simple unfortunately. Search users have to first think of an appropriate query, then type it, then reformulate it…this process will never be a one tap action. We must serve relevant content with the least reformulations possible from the user.

4- Network, or the absence of it

Network coverage is rarely perfect, even in the busiest of cities. Mobile designers and developers must anticipate the user being offline and design accordingly.

Now, let’s look at how to overcome these obstacles. It all comes down to strong design, fluid usability, and smart handling of less than ideal bandwidth and connectivity. Here are some best practices for each of these components.

Best UX practices for the mobile search result screen

Best practice 1: Display search results the right way

Start by understanding how your users browse your catalog. For items that they select visually —  like shoes or clothes — you should present search results as enlarged pictures.

On the other hand, for search results that are heavy on specifications, like restaurants,  a better strategy is to display a list with details like price, distance and ratings.

While it is possible to use a mix of both, understanding how your users search will guide you in choosing the right search interface.

Best practice 2: Filtering that reduces screen clutter

Providing filtering options is a must in advanced search experiences. Since it’s hard to include both filters and search results in the same view without cluttering the screen, look for effective ways to reduce clutter while still providing a powerful set of filters.

Amazon provides a scrolling filter bar, thus fitting in an impressive number of filtering options:

Quick time video [new!]

Good filtering search experiences have one thing in common: they show some sort of feedback when the user applies a filter. For example, the Airbnb app has a button at the bottom of the screen adapting the number of results every time a filter changes.

Best practice 3: Show only the most relevant results

While on the desktop you may afford a luxury of not having the most relevant result at the top — since the user will eventually find it — this is not the case on mobile. Because of the limited real estate, only the top search results are visible to the user, so they’d better be relevant.

Relevance is best evaluated by taking into considerations both textual and business ranking rules; you can learn more about it here.

Usability best practices

Best practice 1: Recognize the typos

As we noted in the obstacles section above, it is easy for the user to make typos. It is therefore important for your search results to have some sort of a typo tolerant mechanism. Anticipating user’s intent and correcting their mistakes will substantially reduce their frustrations.

Best practice 2: Let them scan the results

Some users like reading everything on the screen, but most of us prefer to be able to scan, especially when we are browsing vs. knowing exactly what we are searching for. It is thus the duty of great mobile search UX to help users scan — and what better way to do this than highlighting.

Highlighting helps the user understand why they are getting specific results or suggestions. There are two effective uses of highlighting:

1. Standard highlighting matches the query exactly. This is great for the user to understand why their query matched a result, and is best used when showing instant results.

1. Inverted highlighting highlights everything but the search query. A great scenario for this is query suggestions, where you can make it easy for the user to identify the differences between suggestions.

Environment best practices

Best practice 1: Make your search super fast

This is an obvious one, but we have to mention it since a good search experience has to meet user’s expectations of speed. Google has set the bar high, and apps must follow.

Best practice 2: Manage poor connectivity

On mobile, users are on the go, often with bad connectivity. The search experience has to react well to these circumstances in the best possible way in order to ensure a smooth user experience.

When connectivity is slow, a good idea is to show some progress indicator: spinning wheels, loading icons or progress bars. Another way to manage user’s expectations is to show a skeleton screen with placeholders:

This gives the user a sense of progress and feedback.

Another tactic is to implement “lazy loading”, where you would give priorities to certain types of content over others, and fetch them separately.

Nevertheless, the dreaded case of no network availability will surface at some point to the user, and this needs to be handled properly, beyond just showing a “retry” button. One straightforward way to solve this is to cache the top results offline, and then offer a basic local search experience. A better way is to provide a light full-fledged search engine on the device that is capable of doing most of what the online engine would do. However, this is not for the faint of heart, and may require a lot of skills, resources and time.

What else?

The decision for how you guide your user through the mobile search experience depends on a lot of factors:

• the size & complexity of your data set
• the knowledge that you expect your user to have about the data set they are searching through, and
• your desire to balance discovery and intent in the search experience

We’ve covered the most important components in mobile search today — from text input placement, to search screen and results. Supplement these recommendations with search analytics (so you know what users are searching for and clicking on the most), and A/B testing your search results screen setup, and users will be clicking and buying even sooner.

For further reading, we recommend these excellent articles by UX Planet, and the Smashing Magazine.