People spend a great amount of time searching for solutions on their mobile devices. Whether it’s searching the Yelp app for restaurant reviews, diving deep into the Amazon app for a new pair of shoes, or looking for a long-lost contact in WhatsApp, mobile app users are constantly utilizing the mobile search bar as part of their everyday mobile app experience. Good mobile search UX is fast, fun, effective, and never taken for granted, especially if the product’s navigation or user journey depends on effective search functions (like an e-commerce app).

Challenges of Creating the Best Search Design

Creating great mobile search UX is still a relatively new process, and it brings a lot more challenges than desktop search UX does. First, you should consider the fact that there is limited “screen real estate” on mobile, which means fewer results can be shown following a mobile search bar query. Accuracy also becomes much more important on mobile than on desktop – mobile app users are complicated and impatient. They want answers fast, and if they encounter friction in their mobile search results, this could lead to abandonment pretty quickly.

Apps striving for the best search designs leverage search UX to incorporate micro-interactions, customizations, and personalization for their brand. Your mobile search bar, the filtering options you provide, and the overall search experience that presents an excellent opportunity for user engagement. To help you ensure your search box and functions deliver what they need to, we’ve outlined key mobile search UX best practices below.

Mobile Search UX Best Practice No. 1 –  Learn From Popular Search Styles

Add a Full-length Mobile Search Bar

Full-length Mobile Search Bar
Image Source: Designyourway.net

The full-length mobile search bar is a great search style to display prominently in your app because it draws immediate attention, and gives your users an obvious outlet to take quick action. If you can manage to fit a full-length open-text bar near the top of your app’s home screen, this may be a wise search UX decision, as it leaves no room for uncertainty. Offering a wide search box that says “Search” is just about as clear and helpful as it gets, especially if your app is an e-commerce, media or informational, product which demands great search functionality.

When to Use an Icon-only Search Box

Icon-Only Search UX Box
Image Source: Materialup.com

Using an icon-only search box works best if you hope to leverage a minimalist and clean style for your product, while still giving your users full search functionality (plus more screen real estate for other necessities). Many UX designers like to use the icon-only search style for its simple and effective aesthetics.

But, this does come with some hidden downsides. The icon-only search box’s most obvious flaw is that some users may temporarily stumble to find it. And once users locate this icon, they still have to tap on the icon for the search box to appear, and sometimes tap once more to input text. Every second counts when it comes to creating an optimal mobile search UX. For this reason, icon-only search functions may not provide the best search experience for your users, depending on your unique audience and how they respond to it.

Running an A/B test in your app with an icon-only search and a full-length search bar is the only way to know for certain whether this search style will work for you. That said, the magnifying glass icon is loved universally by a range of audiences. Looking closely at both the full-length and icon-only search styles reveals that including a magnifying glass icon is a must for a positive search UX. The magnifying glass icon is immediately recognizable, and it’s worth noting that most users won’t know to search your product without seeing this icon first.

 

Mobile Search UX Best Practice No. 2 – Refine Your App Search Inputs

 

Provide (Relevant) Default Searches

Default Mobile Search UX
Image Source: Recode.net

Providing your users with relevant default searches means you’re pre-populating your search bars with search queries that are relevant to your users. This can be viewed as a form of personalization or even just plain helpfulness. Pre-populating your mobile app with relevant data like this makes sense because it applies the principle of least effort to your product by making your app’s search experience substantially easier to use.

For example, leveraging user’s geolocation information to create relevant search defaults would work well in the travel accommodation niche, since users of hotel apps will automatically receive suggestions based on where they are located. Offering relevant default search inputs can save users valuable time, and increase overall sales conversions in a big way.

On the other hand, suggesting an irrelevant default search input is one way to frustrate users from the get-go. Imagine the annoyance you feel when a location-based app inputs an inaccurate zip code and leaves you unable to find out where a particular destination is without changing the settings. If you’re planning to add default search inputs, do it in a smart way, or don’t add it all.

Switch on Auto-Suggestions

Auto-suggestions for Mobile App UX
Image Source: YouTube (iOS)

Auto-suggestions present a powerful way to reduce data input and help users get immediate search results. Typically, you should display auto-suggestions after the third character of any query has been inputted by the user – you want to minimize keystrokes as often as possible on mobile and increase your mobile app’s ease of use. Offering auto-suggestions is a great way to help your users find what they’re looking for more quickly. As explained by Google support, auto-suggestions consider the following:

  • User search terms
  • Trending searches
  • Related searches that you’ve performed in the past

You may also choose to offer your own custom auto-suggestions if you think you can provide a more personal or helpful mobile search UX than Google based on a history of in-app use.

Remember Recent Searches

Recent Searches - Mobile App UX
Image Source: UXPlanet.org

Your app should store users’ recent searches as long as their privacy settings allow it. Displaying recent searches as a potential search input is extremely helpful to most users because it helps them to pull up information more quickly. By showing recent searches in your app, you can increase sales (particularly in the case of eCommerce), and help users access the information they need within seconds. GPS, travel, shopping, and many other types of apps can maximize the search UX they provide by remembering recent searches.

The potential downside is that more privacy-oriented users may not want your product to store their recent searches. This issue is easily handled by giving users the option to disable recent searches from being stored.

Utilize Voice Search

Search UX 6
Image Source: Google Maps (iOS)

While voice search technology is still evolving and is unlikely to be the primary search solution for most mobile apps, it can still play an important role in your search UX. Almost any mobile app with a search box can integrate with voice search by positioning the microphone icon directly in the search bar.

‘Hands off’ mobile apps like Google Maps and Waze normally receive the greatest results with voice search, as inputting text data while driving is an obvious liability. But, most mobile apps that offer standard search capabilities may benefit from voice search, as voice recognition technology becomes more advanced.

Mobile Search UX Best Practice No. 3 – Tidy Up Your Search Results

Organize your Search Results

Search UX 7
Image: Cruzapp.com

After helping your users input their search data as quickly, easily and accurately as possible, your goal should now be to deliver the most accurate search results in a legible and easy-to-digest fashion. To do this, you may want to show your search results using a grid, list, map, satellite, or as images, depending on the specifics of your product.

For example, for an eCommerce app like Amazon, images are often the most effective way to display search results because they allow the user to visually compare the products that they are interested in. On the other hand, for a travel app that focuses on finding flights, such as Skyscanner, a list layout is likely to be optimal for conveying extensive search results.

You should always consider your product’s screen real-estate, it’s important to prioritize the most relevant search results by showing them first. In practice, this usually amounts to displaying 3-5 highly-targeted search results higher up, then using the remaining search results to direct users to additional information they might be looking for.

Presenting well-considered search results is a priority, but as Amazon knows, you should also consider that people will often browse through pages upon pages of search results during times of boredom (or sheer frustration). This is why all of your product’s search results need to be optimized.

Mobile Search UX Best Practice No. 4 – Let Users Sort and Filter Their Search Results

Consider your Filtering Options

Search UX 8
Image Source: UXPlanet.org

By now, you should already have a number of tips to help make your search UX a helpful asset to your users. By enabling your users to sort and filter their search results according to factors such as category, location, price, average star rating, and any other relevant qualification, you can help them find what they’re looking for even faster.

Mobile Search UX Best Practice No. 5 – Leverage Micro-interactions, Customization and Personalization

Customize your Search Experience

Search UX 9
Image Source: Designyourway.net

Your product’s search UX provides an excellent opportunity to include micro-interactions, customizations, and personalizations. All of these can help to create an additional layer of unique interaction for your brand.

For example, offering a search bar animation like the one below could provide a simple way to capture your audience’s attention and differentiate the look and feel of your brand. This can be particularly useful if your product is search-focused.

Search UX 10
Image Source: UXPlanet.org

In the case of the Google Play Store example above, the hamburger-style menu flips and transforms into a back arrow when users interact with it. This offers a vital piece of feedback which tells users they can move back to the previous screen if they don’t want to complete a search. Small interaction, but big effect.

Keep in mind that micro-interactions can have a macro effect on your UX, so be sure to take advantage of the opportunity to separate your product from the rest. Plus, using in-app personalization in combination with your search UX can provide your app with another major leg-up in your niche.

 

Mobile Search UX Best Practice No. 6 – Use the Best UX Analysis Tools

Measure the Right Things

After implementing the best search styles, inputs, filters, and micro-interactions for your product, you’ll want to ensure you get the most from your hard work by taking a smart approach to analysis.

This is where using the right search UX tools comes into play, since monitoring and optimizing your app’s new search functions will depend largely on your audience’s unique search habits.

Analyzing Search with Touch Heat Maps

Appsee Heatmaps
Appsee Heatmap Example

Mobile Touch Heatmaps like Appsee’s will provide your team with a visual aggregation of where your users are most likely to interact with your search UX. Because, depending on how your particular audience likes to search, it will be difficult to determine where exactly you should position your search bars, search filters, customizations, and other essential items.

Misplacing these items in your product probably won’t be the end of the world, but it can certainly cost you in product abandonment, bad ratings, and lost revenue.

Playback User Recordings

Appsee User Recordings
Example of Appsee’s User Recordings

User Recordings like Appsee’s are designed to give your team a simple way to visualize how your users are responding to your product’s search functions. With User Recordings, you can get an ‘inside look’ into how individual users search through your app in real-time. This will help you gauge how they’re reacting to certain aspects of the app’s search UX, monitor response times, and examine search behavior like it’s happening in real-time.

You can also utilize a user journey tracker, such as Navigation Paths, to understand where users are navigating after they interact with your search function. This should highlight whether or not your search UX has set them on the best “path”.

Your audience and your product are ultimately two unique inputs that no one can fully understand unless they drill down to the user experience level. This is why Appsee provides you with qualitative user data and single user session insights.

In Summary

Any mobile app team has the potential to craft a great search UX. First, it is necessary to embrace the reality that your app’s search function can serve as a focal aspect of your UX and affect your retention in a big way. Second, you must equip yourself with a robust tool that allows you to analyze how your users interact with your search UX.

At the end of the day, users are searching via your app to find an answer. Whether that “answer” is a pair of shoes, a hotel, or a book- they expect for the search process to be quick, smart, and frictionless. No one likes “unanswered questions”, do you?

Qualitative App Analytics

Leave a Reply

Your email address will not be published. Required fields are marked *