Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

The Basics of Creating the Best Search UX on Mobile

DZone's Guide to

The Basics of Creating the Best Search UX on Mobile

No one likes unanswered questions. Check this list of best practices to ensure that your users aren't searching for a better search feature in your application.

· Agile Zone ·
Free Resource

Buckled up and all set to kick-start your Agile transformation journey? 10 Road Signs to watch out for in your Agile journey. Brought to you in partnership with Jile.

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 search as part of their mobile app experience.

Specifically, search UX is fast, fun, effective, and taken for granted by your mobile app team, especially if your product's navigation or user journey depends on effective search functions (like an ecommerce app).

Yet creating a good search UX for your audience on mobile is still a relatively new process that brings more challenges than search UX on desktop. First, consider the fact that on mobile there is quite limited "screen real estate" which means fewer search results can be shown at once, and search accuracy becomes much more important than on desktop. On top of that, mobile app users are also complicated and impatient. They want answers quickly, and if they encounter friction in their search UX it could lead to mobile app abandonment.

Despite the fact that search UX can have notable effects on your app retention if executed poorly, it also has the potential to be leveraged in a powerful, retention-boosting way. You can also leverage search UX to incorporate microinteractions, customizations, and personalization in your brand. Search UX is ultimately an excellent opportunity, and that's why we're providing the following best practices that you can use to create a great search UX on mobile...

Best Practice #1: Learn From Popular Search Styles

Full-Length Search Bar

Image title

Image Source: Designyourway.net

The full-length 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 search 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 box that says "Search" is just about as clear and helpful as it gets, especially if you have an e-commerce, media or informational product that demands great search functionality.

Icon-Only Search

Using an icon-only search bar works best if you hope to leverage a minimalist and clean style in 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 bar style for its simple and effective aesthetics.

But, it does come with some hidden downsides. The icon-only search bar'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 optimizing your app's search UX, and this is why icon-only search bars may or may not provide the best search experience, depending on how your unique audience responds to it.

Running an in your app with an icon-only search and a full-length search bar is the only way to know for certain which search style your audience prefers.

One aspect of search UX that universal audiences love is the magnifying glass icon. 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.

Best Practice #2: Refine Your Search Inputs

Relevant Defaults

Image title

Image Source: Recode.net

Providing your users with relevant default searches means that 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 makes sense because it applies the principle of least effort to your product, and makes your app substantially easier to use.

For example, leveraging your user's geolocation to create relevant defaults works well in the travel accommodation niche, since hotel apps can automatically suggest good default search inputs based on where someone is located. Offering relevant default search inputs can save users valuable time, and increase sales conversions.

On the other hand, suggesting an irrelevant default search input is one way to instantly frustrate users. Just imagine the minor irrational annoyance you feel when a location-based app inputs an inaccurate zip code, and you can't immediately find out where a particular destination is located. It sounds silly, but little things like this upset today's app users. Make sure to always add truly relevant value to your default search inputs, otherwise it could impede your search UX.

Auto-Suggestions

Image title

Image Source: YouTube (iOS)

Auto-suggestions are a powerful tool that you can use 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, because you should want to minimize keystrokes as often as possible on mobile, and increase your product'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:

  • The terms you’re typing
  • 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 search UX than Google (you never know).

Machine Learning is quickly evolving to a point that may completely change how users search on mobile in 5-10 years. It may best to get your product acquainted with auto-suggestions now, as there are almost no downsides to using it at this time.

Recent Searches

Image title

Image Source: UXPlanet.org

Your app should always 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 with product recall. By showing recent searches in your app, you can increase sales (particularly in the case of eCommerce), and help users access highly-relevant information in seconds. GPS, travel, shopping, and many other types of apps can all maximize their search UX by providing users with recent searches. The only potential downside here is that some privacy-oriented users may not want your product to store their recent searches, but this issue is easily manageable by giving users the option to disable recent searches from being stored.

Voice Search

While voice search technology is still evolving, and typically isn't a sole solution for search functions, it can still play an important role in your search UX. Almost any mobile app with a search box can integrate with voice search, as you can position the microphone icon directly in your 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, even ordinary apps that offer standard search capabilities may benefit from voice search, as voice recognition technology is quickly becoming more advanced.

Best Practice #3: Tidy Up Your Search Results

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 images (depending on the specifics of your product). For example, for an eCommerce app like Amazon, images are the most effective way to display search results because they allow the user to visually compare the products they are interested in. On the other hand, for a travel app that focuses on finding flights, such as Skyscanner, a list layout is most optimal for conveying extensive search results.

Since your product's screen real estate must always be taken into consideration, it's important to prioritize showing the most relevant search results first. This usually amounts to initially displaying 3-5 highly-targeted search results, and using the remaining search results to help users find what they're looking for as soon as possible. Giving users great immediate search results is a priority, but as Amazon knows, you should also consider that people will browse through pages upon pages of search results during times of boredom (or sheer frustration). All of your product's search results should be optimized for this reason.

Best Practice #4: Let Users Sort and Filter Their Search Results

Image title

Image Source: UXPlanet.org

So far, you should be able to make your search UX quite a helpful asset to your users. But, by also letting your users sort and filter their search results according to category, location, price, average star rating, or any other relevant qualifications, you can help them find what they're looking for even faster.

Best Practice #5. Leverage Microinteractions, Customization, and Personalization

Your product's search UX provides an excellent opportunity to include microinteractions, customizations, and personalizations which can all add an additional layer of unique interaction to your brand. For example, offering a search bar animation is a simple way to capture your audience's attention and differentiate your brand, which can be useful if your product is search-focused.

Image title

Image Source: UXPlanet.org

In the case of searching the Google Play Store (as shown 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 — big effect.

Keep in mind that microinteractions 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.

Search UX Best Practice #6. Use the Best UX Analysis Tools

After implementing the best search styles, inputs, filters, and microinteractions for your product, you have to make sure that you'll get the most out of your hard work over the long-run. 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.

Touch Heat Maps

Image title

Example of Appsee’s touch heatmaps

Appsee's Mobile Touch Heatmaps, for example, 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.

User Recordings

Image title

Gif of user recordings tool with Appsee

User Recordings, such as those of Appsee, are designed to give your team a simple way to watch how single users respond to your product's search functions. With User Recordings, you can get an "inside look" at how individual users search through your app in real-time. This will help you gauge how users react to certain aspects of your search UX, monitor response times, and examine search behavior like it's happening before your eyes.

You can also utilize a user journey tracker, such as Navigation Paths, to understand where users navigating after they interact with your search function, and whether your UX has set them on the best "path".

Your audience and your product are ultimately two unique inputs that no one can fully understand until we drill down to the user experience level. This is why Appsee provides you with qualitative user data and single user session insights, so that you can instantly identify where your search UX can be improved and better yet how.

Conclusion

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 greatly affect your retention rates. Second, you must equip yourself with a robust tool that allows you to actually 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?

What does it mean by Scaling Agile? Download the whitepaper on Five dimensions of Scaling Agile in Large Enterprises. Brought to you in partnership with Jile.

Topics:
agile ,ux ,mobile ,search ux ,mobile user experience ,best practices ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}