In part 1 of this series on mobile UX design, we talked about how designing a successful search user experience for people on mobile devices means overcoming certain usability challenges, from limited mobile screen space to inflated user expectations. In this second post, we’ll look at how you can avoid novice design mistakes, implement winning design patterns, and ensure that your users can effectively pull up the best search results by implementing the right mobile UI elements.

The ways you choose to guide searchers through your mobile user experience and navigate your user interface will depend on the size and complexity of your data set, your visitors’ expected knowledge of the data set they’re searching, and how much you should try to balance search intent with more organic item “discovery.” Regardless of those nuances, when it comes to mobile search, there are certain tried-and-true approaches.

Invite mobile users to search

The search bar is the point of entry for much of what will happen in your mobile application or on your web pages. If the majority of your users want to start off on your site or in your app by enlisting the guidance of a knowledgeable search engine, this field should be prominently nestled on the home page or easily called up by clicking an eye-catching search icon (such as a magnifying glass).

You can reinforce for your site visitors or app users that they’re looking at the search bar, which awaits their input and is ready to provide a helpful search experience, by adding hint text (a placeholder). Here’s a screenshot of Spotify’s version:

Is search something that people might want to use only on certain parts of your site or in certain areas of your app? Then a contextual search icon is a less-in-your-face option: You display an icon only where searching makes sense.

Provide search filters and facets

Shirt or blouse? Which brand? What color?

In an ecommerce app teeming with items, filters and facets can help searchers reduce the number of relevant search results and scrolling they’ll get bombarded with. It’s always a plus for etailers when customers can quickly zero in on The One instead of slogging through tooo many possibilities and potentially losing interest in the process.

What’s the difference between filters and facets? After all, aren’t facets just a form of filtering?

Well, yes. But filters are typically static entities. For example, if someone is searching Amazon for “laptop”, they can select basic filters such as the brand name on a drop-down list. 

Filtering options are one indication that a company has set up a mobile interface with advanced search options, should they be needed. As a business, you can consult your metadata to determine the right filter options to provide in order to guide users.

Facets are dynamic lists of categories that change based on the type of search. A good example: considering various levels of user needs. In this Amazon search for a laptop, which could produce some pretty pricey models, the facet “Under $500” caters to people who may need to stick to a budget: 

With filtering, show feedback

With small-screen real estate, it’s hard to include both filters and search results in the view without creating a cluttered mess. Sometimes you can squeeze in a few key filters at the top of the screen, but it might make more sense to present a dedicated view of all the possible filters.

Good mobile filtering experiences have one thing in common: some type of feedback is displayed when a filter is selected. For example, the Airbnb app adjusts the number of results available for each activity type:

Anticipate what people might want

One way to make every tap count for your users is to provide autocomplete as an element of your mobile interface design. With this functionality, instantaneous search-query “guesses” update for users as their search terms are being entered.

Implement spelling and typo tolerance

If a customer misspells a query, you don’t want them to get a “No results” page. And then there are typos: it’s especially easy for people using mobile devices to create typos with their tiny keyboards. The solution is to proactively detect and suggest corrections for misspellings. 

Here’s how YouTube figures out what’s wanted despite a spelling error:

Offer query-related suggestions

Query suggestions typically appear below the search bar as someone is entering a phrase. These suggestions may seem directly related, but they’re not necessarily. Query suggestions help users find queries that are guaranteed to return results.

They could be analytics-generated popular search queries that have been entered by others, which have the potential to entice the searcher into something that may also look interesting or related enough to jump to. 

Or, they could be more-complete queries based on the searcher’s entered term. Let’s say you’re ready for your next Apple iOS or Android device, and you enter “iphone” in the search box on Google. The suggestions could be more-specific queries related to various recent models, such as “iPhone 14 Pro Max”:

Given that query suggestions constitute an extra step for the user, who may naturally be overwhelmed by all the choices, they’re most helpful when a site or app has a large data sets. By essentially asking “Are any of these what you’re looking for?”, they help guide the searcher through all the options to the most relevant items.

Be proactive with instant results

People on mobile search missions expect the experience to be instantaneous, not only with respect to how fast their results are fetched but how frequently they’re updated. So instead of waiting for the user to enter a full query, you can display anticipatory, dynamic, as-they-type search results from their first keystroke.

One option is to pull up actual search results with each keystroke and display them on the results page. This approach is most effective when the data set is either more limited or the user has a more defined idea of what they need.

Another approach is for a mobile UI to divide its screen real estate by showing a limited number of items for each type of content (e.g., in a music-streaming app, five artists and five bands). The most relevant results appear on these lists, and you can include “Show more” buttons at the bottom of each.

Combine suggestions with instant results

Suggestions and instant results together are a good way to optimize your mobile design when you have a very large dataset and want to both guide the user and determine whether a good match has been made. For example, the Google Play app store might show an app search result it thinks could be the right one, along with query suggestions below it in case that result misses the mark. 

Offer federated search

If you have an enterprise-level search application, consider providing the comprehensive option of federated search. Along with search results, you can include recent searches, popular searches, and content gathered from multiple indices, all in a single search-results interface.

Offer the option to voice search

Mobile apps are increasingly offering the option of voice searching, letting users enter search queries by speaking into a microphone as they’re on the go. For example, Google Maps lets people conveniently speak search queries while driving.

Don’t leave the search-transition screen blank

So in your search UI, your searcher has entered a query, perhaps chosen a query suggestion, and clicked the magnifying-glass icon. They can relax with a nice blank screen or progress-bar indicator that their search has commenced and they’ll soon be seeing some great results.

Yes, you can provide that Zenlike in-app break for them as part of your UI design, however, the transition page to their search results is an opportunity to engage them a bit — based on what you know about their search querying so far — even before they get to their search results. So instead of an empty page in your search UX, you can give them suggestions, in case they weren’t specific enough with what they entered. Your search functionality can also show them real-time trending or recent searches, or categories they might like to explore, either instead of or in addition to their current search interest.

Next stop: the search results page

Now that you’ve gotten some UI/UX design inspiration and preliminary ways to utilize strong mobile app design to aid the search process, you’re ready for part 3: optimally structuring mobile search results. 

About Algolia