Mobile search UX best practices, part 3: Optimizing display of search results

In part 1 of this blog-post series, we looked at app interface design obstacles in the mobile search experience.

In part 2, we examined the components of designing a search experience for mobile that avoids common pitfalls, considering the user interface needs for the mobile search bar and which search options work best to guide users on a mobile device.

Now let’s put a magnifying glass on how you can create the best search results page when creating the search experience for your mobile users.

With mobile site or app functionality, as with the design of other search features, the design of search results must be just right. There’s nothing worse than scrolling down through search results on an Apple iPhone or Android through text displayed in a cluttered or disorganized way that obscures what’s relevant. A good mobile search results page design delivers the most accurate information to help users in an easy-to-read way.

Excellent UI design for the mobile user experience also reflects the type of search being conducted. For example, with some mobile search categories — a good example being restaurants — it makes sense to display results with easily comprehensible icons denoting price, ratings, and distance from the searcher. It comes down to your particular mobile application use case and what your customers want to see on the search results pages. When you can collect all pertinent usability data and thoughtfully consider the best way to present search results for mobile screens based on what you know, the mobile design phase should be relatively easy.

Present the most relevant results

Without a commitment to excellent search relevance, you might as well not worry about how to optimize other mobile UX best practices. Relevance is super critical on mobile devices because of the tiny screen, which can accommodate such radically limited results. Because of the minimal viewing real estate, compared with regular web pages, only the top search results are visible, so they’d better be on target.

Highlight text for easy scanning

In general, people don’t like — or feel that they have time — to read everything on the search screen, especially when they’re just browsing what’s available vs. knowing exactly what they need. What they prefer to do is skim the text for information that tells them Yes, this search result seems promising.

One way to help people denote those click worthy items is proactively applying a virtual highlighter pen (or bold font or some other text treatment) for them. Highlighting the key terms — the words they typed in the search box as they appear in the search results — can streamline their information-finding experience. 

There are two effective ways to use search-result highlighting:

• Highlighting the words that exactly match their query text. This is an intuitive way to call out the search terms as they appear in the found text. It works especially well with instant results.
• Highlighting everything but their search query text (known as “inverted” highlighting). This lets the searcher use the highlighting to easily focus on and identify the differences between the results. Another place where this method works well is with query suggestions.

Stash their search history

Good mobile search UX design incorporates storage of people’s recent searches, plus their own personally saved searches. That way, such as when they’re in an ecommerce app and realize they liked an item they saw earlier, they can easily trace their path right back to it and avoid wasting time. And allowing people to save searches themselves for easily repeating later would be appreciated if, for instance, they’re searching for the same particular item at regular intervals.

Acknowledge failed searches

It happens: mobile searches sometimes provide no results whatsoever. When that’s the case, you can gently inform the user of the status. Even better, of course, would be to include a fairly specific explanation of what went wrong: some version of “We don’t have anything matching what you want” is a popular search response.

And don’t stop there. With UI/UX elements for mobile, when one search door closes, another could open: you can use this opportunity to help them out of the search void by suggesting helpful related or alternative content or filtering options.

Provide their results ASAP

Mobile users may not have WiFi, their 4G network may be slow, or they may be using faster 5G but have some other real-time issue. Unfortunately, any delay in the appearance of an information seeker’s search results can mean a negative user experience and lower engagement. If search results don’t show up immediately, the user may think something is wrong.

In terms of UX design, while you can’t control connectivity, the one thing you can control to meet user needs is ensuring that search results appear as instantaneously as possible. How? By designing your search feature to not compound the problem by slowing down the user experience. By optimizing your images: sizing them correctly, compressing them, using a fast-loading image format, and using pagination to limit the number of results displayed on each page.

Show a progress bar or other type of indicator in your search UI — spinning wheels, a “Loading” icon, or a progress bar — that something is happening.

You can also show a skeleton screen with placeholders:

A final way is to implement lazy loading: prioritizing certain types of content over others and fetching them separately.

Nevertheless, dreaded no-network availability will surface at some point, and it must be handled beyond just providing a “Retry” button. One solution is to cache the top results of a user’s search offline, 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 requires significant skills and resources.

Use a flattering search-results display

How will your app users want to browse your catalog items: in a list, a grid, thumbnails, “pins” on a map, or in multiple ways, with the ability to toggle back and forth? For items they’ll want to select visually, like pairs of shoes, it only makes sense to present search results as images.

Which layout works best for your products or services? Here’s how the Netflix, Etsy, and Zillow mobile apps display search results for their use cases:

Netflix’s format allows you to view a longer list of items without having to scroll. Etsy uses a grid that emphasizes eye-catching creations while also providing product details. Zillow plots homes on a map.

If it makes sense for your use case, and users don’t have to take multiple steps to switch views, you can also give them the option to toggle between formats. 

Make your search results accessible

Finally, you can make your mobile search results, and indeed your entire mobile UI — more accessible to all your users by meeting industry standards for accessibility.

Two ideas: 

• Enable alt-text on the search icon. Then, allow users to browse the search results by using the keyboard
• When a search result is found or not found, display a status message that can be picked up by a screen reader

The end result(s)

Effectively designing the search experience for your mobile app in a way that delights your roving users and makes them want to stick with it may have some daunting moments, but persevering is worthwhile if you want a winning mobile experience. Remember, good mobile search design patterns enable your users to seamlessly find what they’re looking for. Well-designed search on a mobile device can improve not only the in-app user experience but your conversion, customer loyalty, and profit margins.

That sums up our series on mobile search UX design — hope you’ve found this design inspiration insightful!

Now that you know all the secrets of mobile app design, are you ready to provide a satisfying experience that brings people back to your app time and time again? One option: Algolia can bring our advanced search functionality expertise to your mobile-app designers’ table. If you’re interested in learning the details, just let us know. We look forward to hearing from you.