What goes into a great search experience?

The Elements of Search [Infographic]

Mobile Search Design and UX Best Practices

Mobile Search Design and UX Best Practices

Mobile UX encompasses the end-to-end experience and interaction flow that users follow when interacting with an app or browser on a handheld or wearable device. Many users now prefer to access the internet through mobile devices, which account for about half of all web traffic.

Thus, starting your design with a mobile-first approach and aiming to optimize the user experience for those devices is increasingly important for building a compelling mobile app or website. It’s important to consider your target audience and relevant research before developing a mobile application, as well as selecting the right platform and conducting testing measures.

This article explores mobile search design and its best practices, demonstrating relevant use cases and discussing factors and techniques to consider to build an effective mobile-optimized search.

Mobile search basics

The online experience almost always begins with search. Like its desktop counterpart, mobile search involves sending a query into a database, results for which are then returned to your mobile device. Search is an integral part of mobile activities since apps are used to retrieve all kinds of information. Without a search, it would be hard for users to interact with your application or services. A good mobile search feature enables users to seamlessly and quickly interact with your services and application, thereby fostering a good business relationship between your services and the user.

In order to accomplish this, it’s important that your search bar is designed intentionally. The search bar is the root of all search activities in your mobile application, enabling users to enter queries based on the information or product they are looking for. A well-designed mobile search bar allows users to find the information they seek with speed and efficiency.

Of equal importance is the design of your search results. There’s nothing worse than scrolling endlessly through results that are displayed in an unclear or disorganized fashion that obscures results relevant to what you’re hoping to find. A good search result design delivers the most accurate results and data in a legible and easy-to-digest form, so it’s important to be strategic in the format in which you display results.

Designing your mobile app or website in such a way that mobile users are likely to use it and stick with it in the long term makes a big difference in its success. Well-designed search can improve user experience, conversion rates, and brand loyalty. There are a lot of factors to consider, which we’ll explore in more detail throughout the rest of the article.

Implementing best practices

Try to imagine the user experience of a search. When users are searching for information about a product, an article, or a webpage, they typically begin with an internal site search, which involves a variety of steps, such as:

  • Entering a search query in the search bar (either by text or voice)
  • Filtering their search result with filters
  • Showing results, if any are found
  • Browsing through the results
  • Displaying feedback information if a result is not found

Improving mobile design starts with features that optimize usability for smaller screens. Let’s explore some of the best practices you can implement in your application’s mobile search feature.

Enhance search bar visibility

The search interface should be easy to use, and the search bar should be visible on apps driven by search. You can accomplish this by displaying a persistent search bar on the top of the screen or by using a magnifying search icon in a prominent spot like the navbar or tab bar below the screen. Also, let your placeholder word(s) provide a hint in the search bar. Instead of using “Search,” give it a more descriptive name that informs the user what information they should be looking for. Here’s a good example:

mobile ux: The spotify music app
Improving mobile usability can boost customer experience, on-site conversions, and brand loyalty.

As pictured above, the Spotify mobile UI provides a search bar that is easily visible at the top bar of the application. You’ll notice how prominent a nicely designed search icon is at the tab bar below the screen. The search also includes a descriptive placeholder to inform the user what they can search for in the search box. Spotify’s great user experience is one of the reasons for its extreme popularity as a music streaming platform, and the search feature is an obvious contributor.

Offer autocomplete and suggestions

One cannot overstate the benefits of a great UX, which seamlessly makes any and all user-performed tasks easier. One way to do just that is to design your search with a preview feature that offers mobile users autocomplete and drop-down suggestions. This helps users find relevant search terms and reduces the typing time needed to execute a search. Take YouTube, for example. Their mobile app does a great job implementing this technique and anticipating the user’s desired search criteria:

Autocomplete demo with Youtube mobile app

Implement typo tolerance

If customers misspell queries, you don’t want them to get a “no results” page in response. Thus, try to proactively detect and fix misspellings in your search feature. Google excels in this area, anticipating what the user meant instead of relying only upon what they typed into the search query:

Typo tolerance demo
Users need typo tolerance — especially on mobile.

As you can see in the image above, I misspelled “technical writing,” and Google suggested the correct spelling instead. Autocomplete ships by default by most search-as-a-service providers like Search.io and features like Neuralsearch can even understand concepts which helps avoid most typo issues from the outset.

Provide recent & saved search history

It is recommended that you design your search to store users’ recent searches with a saved search history section. You can do this either by storing the user’s search automatically as they go or by allowing the user to save the search for easy access later. Your app can help users retrieve highly relevant information in seconds by showing them recent searches that help them recall their previous inquiries. This is especially useful in the case of e-commerce. The Jiji mobile app is a great example for implementing this best practice:

Recent & saved search history demo
Design elements such as search history can save mobile users time when shopping.

As you can see, it displays the recent search and recently viewed products with an option to clear the search history as needed.

Provide error feedback

It’s also important to provide users with a seamless experience when their search doesn’t produce any results. Ensure the user understands the problem and tell them what went wrong if it’s possible. If users cannot find matches in their search, provide them with valuable alternatives, like fallback content. For instance, the Jumia mobile app design has a great feedback error in place:

Error feedback demo
Error feedback is especially important on e-commerce apps, mobile sites, and other mobile apps.

Here, I searched for the wrong product, and it prompted me with a hint at what might have gone wrong and even showed me products that start with the letter L, in case I may have been looking for lamps, for example. Here are some additional ideas to avoid no-result searches.

Emphasize speed

Speed is vital to your application, and you need to consider it when designing your mobile search. Mobile users may not have WiFi and 4G networks may be slow. Even though 5G is faster, you are best served by designing fast search.

Any delay in the search result can lead poor user experience and lower user engagement. Endeavor to design your search not to slow down the user experience: optimize your images by sizing them correctly, compressing them, and using a fast-loading image format, and use pagination to limit the number of results per page that will be displayed to your users.

Display search progress

If search results don’t show immediately or the network connection is poor, the user might think something went wrong. To alleviate concern, show them a progress bar or other indicator as a feedback system to tell them you’re working on it, as the Apple Music mobile app does here with its “LOADING” message:

Search progress demo

Strategically display search results

Search results can be presented in several ways: as a list, grid, thumbnail, or on a map. Adapt the presentation of your app’s search results to your own context. Even though you can display the result in multiple ways, that doesn’t mean you should, especially when multiple steps are required to switch views. Consider the layout that works best for your product or services.

Display search result

The image above shows how the Netflix mobile app uses a list format to display search results to the user because a list allows you to view more items without needing to scroll. In contrast, Etsy uses a grid to display product results to provide the viewer with additional product information. Finally, Zillow uses a map to display a geographic plot of houses available for rent in London.

Utilize filters and facets

Filters and facets effectively enable users to find relevant information or products quickly while guiding them to their desired destination. To best understand what each of these components does, consider Amazon, for example:

Amazon.com demo with filter and facets

Facets are dynamic lists that change depending on the search. In the example above, the search is for “laptop,” and the results show facets for different departments under “Computer & Accessories,” including “Computers & Tablets,” “Laptop Accessories,” and more. The results also enable you to use facets to shop by factors like brand or model.

Filters typically don’t change. They provide a static list regardless of what product you’re searching for. Amazon allows users to select a filter as they input their query in the search bar before executing the query. You can also filter out products based on customer reviews and prices.

If your mobile application is search-driven and has a lot of data to be displayed to the user, consider providing users with specific filtering options relevant to their search, or have them brought in as suggested filters on the fly based on your metadata. A faceted and filterable search enables customers to narrow down results to more quickly find exactly what they’re looking for.

Apply a mobile-first development strategy

Applications are accessed through the web by all kinds of users with differently-sized screens, whether mobile, desktop, or otherwise. When building your application, be sure to consider all different types of users and start your development with a mobile-first approach. For example, Amazon expertly scales its application based on the user’s device. It’s easy to notice their excellence in mobile compatibility:

Mobile-first development demo
User interface design can begin by optimizing for a mobile-first experience.

Also, testing your application is always an essential step. Be sure to explore how your application performs across several display sizes once you’re done building it. You can do this using Chrome DevTools within the Chrome browser by pressing option + command + I on your keyboard to view your application or website on a wide variety of different devices:

Test with mobile display

Test with limited bandwidth

If your users access your sites with limited bandwidth, will they still have access to your services? You can check this in real time by using a browser inspector like Chrome DevTools:

Test with limited bandwidth

Access your website or application with limited bandwidth and check it in real time on the Network tab in the browser console pictured above. The network throttling functions on the Network tab enable you to visualize how long a page takes to load on a mobile device.

You can then leverage this feature to analyze network performance in a slower network by changing the throttling drop-down from “Online” to “Fast 3G,” “Slow 3G,” or “Offline.” You can learn more on how to inspect network activity here.

Consider accessibility standards

Finally, your UI should be accessible to all users. For all kinds of applications and websites, it is important to meet the industry standards for accessibility.

For the search bar, consider displaying it at an accessible spot, such as the top right or top center of the screen. Then, enable alt-text on the search icon. For the search results, allow users to browse results with the keyboard. Consider displaying a status message for screen readers, like when a result is found or not found. You can check this post to learn more about Web Content Accessibility Guidelines (WCAG) for search.

Accessibility standard
Your search function can include filters such as those shown above.

Expedia is a great example of a platform that takes accessibility standards into account. Interacting with their search input can be done entirely on the keyboard, making navigation possible with the “tab” and “enter” keys instead of necessitating the use of a mouse or touchpad.

Voice search and advanced search features

Finally, many modern mobile apps incorporate additional techniques like voice searching, which enables users to enter a search query via an onboard microphone as the input for searching instead of relying upon a manual keyword query. A pattern like this is especially valuable for apps that are frequently used “on the go.” For example, Google Maps’ voice search functionality enables users to communicate with the application while driving, which goes a long way in extending user experience, not to mention safety.

Advanced search features are also becoming more popular, especially for enterprise-level applications. Advanced searches can complement simple searches, enabling users to find the exact information or product they want within your application using additional filtering and faceting options that seamlessly guide users through their search journey.

Final thoughts

A good mobile search design enables users to find what they’re looking for quickly and easily. In this article, you’ve explored some UX best practices for a mobile search design and reviewed several examples of companies that have implemented them to make finding products and relevant information a breeze.

All of these factors and best practices contribute to providing your users with a level of satisfaction that will bring them back to your application time and time again.

Be sure to take a look at Search.io, a customized, AI-powered search engine that helps users find what they want when they want it.

About the author

David Adeneye is a software developer and a technical writer passionate about making the web accessible for everyone. When he is not writing code or creating technical content, he spends time researching about how to design and develop good software products.

Similar articles

User Experience (UX)
Best Practice

Drastically Improve Your Website's UX by Improving Site Search

Best Practice

An Introduction to Custom Search Engines

Ecommerce
Best Practice

How to Get a Competitive Edge with Smart (and Surprisingly Easy) E-commerce Site Search Solutions