Mobile Search UX – Part Three: Displaying the Hard Work

In part 1, we’ve depicted the many obstacles around search mobile UX. In part 2, we took a look at the anatomy of mobile search. We tackled the search bar, the search screen, and the search result screen. In this last part of the series, we will focus on the actual results page, specifically looking at what it needs to look like when building a great search experience for your mobile users.

Design: real estate is key

Display results the right way

When displaying search results, the end user should be able to pick the results that are right for her. It is therefore important to visually display the information in a way that will resonate with her, while making efficient use of the limited screen space.

Start by understanding how your users browse your catalog. For items that they select visually —  like shoes or clothes — you could present search results as enlarged pictures.

On the other hand, price, distance and ratings can be used to display results for entries that are heavy on specifications, like restaurants.

While it is possible to use a mix of both, understanding how your users search will guide you in choosing the right search interface.

Showing feedback when filtering

Providing filtering options is omnipresent in advanced search experiences. The issue at hand is mobile screen real estate since it is hard to include both filters and search results in the same view without the screen getting cluttered. Sometimes, we are able to squeeze a few important filtering buttons in a top bar:

But most of the time, we’ll have to show a dedicated view with all possible filters. Good filtering user experiences have one thing in common: they show some sort of feedback when the user applies a filter. For example, Amazon displays a panel that occupies 2/3 of the screen width. When a filter is applied, the background search result view will update on the fly to showcase the new results:

 

Another example is the Airbnb app, where there is a button at the end of the screen displaying the number of results every time a filter changes.

Show relevant results

Relevance is of utmost importance on mobile because of its tiny screen which allows for a very limited number of results to be visible. Without relevance, all best practices are for nothing.

While on the desktop you may afford a luxury of not having the most relevant result at the top — since the user will eventually find it — this is not the case on mobile. Because of the limited real estate, only the top search results are visible to the user, so they’d better be relevant.

 

Relevance is best evaluated by taking into considerations both textual and business ranking rules; you can learn more about it here.

Usability: respect user’s effort

Recognize the typos

It is easy for the user to do typos. This is even more true when typing on mobile due to the limited space between keys. It is therefore important for your search results to have some sort of a typo tolerant mechanism. Anticipating user’s intent and correcting their mistakes will substantially reduce their frustrations.

Let them scan the results

In general, people don’t like to read everything that is on the screen, especially when they are browsing vs. knowing exactly what they’re looking for. What they prefer to do is scan for information. It is thus our duty to help them achieve this, and what better way to do this than highlighting.

Highlighting helps the user understand why they are obtaining specific results or suggestions.  There are two effective uses of highlighting.

The first one is a standard highlighting that matches the query exactly. This is great for the user to understand why her query matched a result, and is best used when showing instant results.

The second one is inverted highlighting, which highlights everything but the search query. A great scenario for this is query suggestions. In there, the user can easily identify the differences between the different suggestions.

Environment: speed and connectivity

This is an obvious one, but we have to mention it since a good search experience has to meet user’s expectations of speed. Google has set the bar high, and apps must follow.

On mobile, users are on the go, often with bad connectivity. The search experience has to react well to these circumstances in the best possible way in order to ensure a smooth user experience.

When connectivity is slow, a good idea is to show some progress indicator: spinning wheels, loading icons or progress bars. Another way to manage user’s expectations is to show a skeleton screen with placeholders, as shown in the screenshot above. This gives the user a sense of progress and feedback. A final way to improve the search experience is to implement lazy loading, where you would give priorities to certain types of content over others, and fetch them separately.

Nevertheless, the dreaded case of no network availability will surface at some point to the user, and this needs to be handled properly, beyond just showing a “retry” button. One straightforward way to solve this is to cache the top results offline, and then offer a basic local search experience. A better way is to provide a light full-fledged search engine on the device that is capable of doing most of what the online engine would do. However, this is not for the faint of heart, and requires a lot of skills, resources and time, as we learned building it with Algolia.

With this series, we tried to share everything we learned through many years of building search user experiences on mobile. Let us know if we missed anything or if you have any questions or feedback: @guydaher, @algolia

This blog post relies heavily on the research done by Lucas Cerdan, Product Manager at Algolia. Big thanks, Lucas!