The only thing users have to do after they download your app is find that content.
And while that sounds easy in theory, things aren’t always that smooth in practice. How often do you struggle to find what you’re searching for in an app, and in desperation, turn to Google for assistance?
It doesn’t have to be that way – and in this article I’ll show you how, by sharing 20 best practices for mobile app search design.
Along the way, I’ll provide plenty of screenshots of both good and bad examples of app search, to help you make your app search shine.
Successful Mobile App Search is like a Good Conversation
App search is great because it helps your users access all the content that you’re providing.
However, to successfully search, users need a fundamental understanding of your app and your products in order to know:
- How to search
- What to search for
- What the query should be
To resolve this knowledge gap, a successful search interaction should be like a good conversation between you and your user that ultimately helps them find what they need.
You can think of a search as being broken down into three key components:
- Entering the query
- Showing no results (if no match was found)
- Showing results (if at least one result was found)
Let’s investigate each of these in term.
Entering the Query
Before the user can ever see any results, they have to type a query into some sort of search bar. The query then gets matched to the data in your database and the appropriate results returned.
Unfortunately, unless your app includes a powerful search engine, the results will likely be less than desirable and hard to digest.
Fear not, though! Best practices #1-8 will help you steer your user to the objects of their desire.
- Make Search Easily Discoverable: If your app relies heavily on search to drive user engagement, make sure that the search interaction is easy to find. This can mean either showing a persistent search bar on the top of the screen or placing an icon of a magnifying glass in a prominent spot like the Tab Bar or the Nav Bar.
Make the Placeholder a Hint: Don’t use a generic placeholder in the search bar like “Search.” Instead, use something more descriptive that tells the user what kind of information they should be looking for. And if there are limits to your search, explain them here, so that the user knows what kinds of searches the app affords.
Bad Example: Messenger Good Example: Robinhood
Offer Suggestions: One of the worst mistakes you can make is showing an empty screen underneath the search bar when the user taps it. There’s a limited amount of real estate on a mobile screen, so don’t waste it with empty space.
This is your chance to guide the user through your conversation. Use this space to offer the user some suggestions or curated content such as “Popular Searches”, “Favorites”, “Closest”, or “Top Rated”.
Bad Example: Skillshare Good Example: Pinterest
The advantage of this pattern is that the user might not even need to perform the search query, but can instead choose from a selection of predefined content that you can guarantee will return relevant results.
Auto-Complete: One of the more popular, and useful, design patterns is auto-complete or “Search within Search”. As the user types, the app suggests several other related queries that the user can select easily. It has one of the best benefits for mobile users: reduced typing time. It also allows you, as the creator of the app, to gently nudge the user in the direction you think would be best for them.
Good Example: Cookpad Good Example: Lyft Bad Example: iTrans NYC
Search Within: A special kind of search that allows users to search within a category they’ve navigated into. Even though not many apps or businesses support this model, most users expect it. This type of search also helps prevent errors, because you’re guiding the user to search for something that will definitely yield results.
Good Example: Spring
Save Search History: Users appreciate when an app has an idea of what they were doing in a previous session – especially related to browsing. Imagine how frustrated you would be if a call or a notification interrupted you from finding that perfect butter knife, and you had to start all over again.
Including such a section in your search flow increases the user’s trust in your product and encourages their willingness to explore. This can manifest itself in one of two ways: the app storing the user’s search automatically as they go, or the app allowing the user to proactively save the search.
So-So Example: Evernote So-So Example: Amazon Good Example: Medium
Offer Scoped Search: If your app has a whole lot of content that can be further broken into a number of categories, you might want to consider a scoped search, which helps users understand the “space” that they’re in — as long as the scope is shown prominently enough and can easily be changed.
Good Example: ProductHunt
Constrain Search: If your app is very specific about what type of content it offers, the best way to help the user find what they want is to constrain their search to a couple of different parameters. That way the app is as clear as possible about what it needs from the user, and the user can be as specific as they want to be in the boundaries of those constraints.
Good Example: Airbnb
Note: As you’ve seen in some of these examples, the methods above don’t have to be used exclusively of each other, but can most definitely be used in parallel — it all depends on the type of products you have.
Showing No Results
After all this hard work both the user and the app have done, it’s time to reap the results!
Whenever you’re designing a new feature in your app, follow the usability principle of “Help users recognize, diagnose, and recover from errors”. Basically, think of the worst-case scenario first, and take steps to allow the user to recover.
The great thing about the no-results page, is that it offers a great opportunity for you to reconnect with your users and gain their trust through several mechanisms.
Best practices #9-13 have to do with how you can make the most out of no results at all.
Communicate the Problem. Be transparent that something went wrong, and if possible let the user know what the issue is.
Good Example: Etsy
Correct and Fix Misspellings. This is one of the main causes of no results screens, so it’s a good idea to try to detect and fix misspellings.
Good Example: Google
- Make Search Less Specific. Another of the main causes of no results screens is that the user is overly specific. To resolve this, try removing part(s) of the search query to make it into something you can match. If the user was searching in a category, you can allow them to view the entire category.
- Fallback content. If there are still no results, you can provide curated content or popular searches as a fallback.
- Give Option to Login If Necessary. If they searched in a category that requires login, give them the option to login or signup.
If the user went down the happy path, they’ll have the results they were looking for. But beware, you can’t just dump all the results on the page and let the user figure it out.
Best practices #14-20 help your users have a sense of orientation and space with your search results.
Consider Your Default Sort: When you display your search results, give them a default logical order that can be easily seen and recognized. This can be either alphabetical, by price, by date or by distance. Sort the results in a way that will be most relevant to your customer and your product.
Bad Example: Google
Categorize Your Results: If your app requires search, that almost always means you have content that fits in with a certain category; in the case of apparel, that would be clothes, accessories, and shoes. You can do this by simply adding headers to your search results.
Bad Example: Netflix Good Example: Spotify
Offer Helpful View Options: Search results can be displayed in different modes: on a map, as a list, as a carousel or as thumbnails. Display them in the manner most appropriate for your context. Just because the results can be displayed in many different ways doesn’t mean they should be, especially when it requires multiple steps to change views.
Bad Example: HomeDepot Good Example: Airbnb
- Prefer Infinite Scrolling to Pagination: Not many apps use paginated results screens. Nevertheless, it’s worth mentioning that you should favor the infinite scroll and lazy load pattern over a paginated results page. A Show More button also performs better than pagination.
- Show Search Progress: If the results don’t immediately pop up, the user might think something is wrong. Don’t just let them sit there! Instead show them a progress bar or HUD to tell them you’re still working on it.
Show Number of Results: If you decide to categorize the search results, it’s a good idea to show how many products are in each category before the user commits to any one of them.
Good Example: Booking.com
Highlight Keywords: Sometimes it’s hard to glance at results and understand how they pertain to the search query. You can help the user out by highlighting the search keywords.
Good Example: Reminders
Where to Go From Here?
Take a good, hard look at your app and see if some of the examples above could help your users have a better search experience. Are there any undesirable elements that some of the apps above share with your app? How could you change this?
App search is only one part of content discovery. Another huge part is filtering, and that’s what I’ll be covering in my next article.
In the meantime, if you have any questions, comments or app experiences to share, please do so below!