You can’t sell a product that your customers can’t find. Search is a fundamental mobile activity and a critical element of building a profitable app or site. Users expect smooth in-app experiences when finding and learning about products and they typically make very quick judgments about app’s value based on the quality of one or two sets of search results.

An excellent search facility should help users find what they want quickly and easily. In this article we’ll figure out how to make it possible.

1. Placement Of Search

Users often move fast and furiously when they’re looking for search. They typically scan a page looking for “the little box where I can type.”

Goal: Design search bar to be clearly visible and quickly recognizable.

Prominently Display The Search Field

Search is a primary function for eCommerce apps/sites and should be displayed prominently, as it can be the fastest route to discovery for users. Apps that do not have a prominently placed search box can cause user frustration and slow the user down.

Left: The search functionality is hidden behind a menu option. Image credit: thinkwithgoogle

Ecommerce apps should feature search at the top of their home screen (and if the home screen is long, repeat it at the bottom). For apps with huge inventory, displaying the search field by default would ensure it is both obvious and fast to use. ![](/content/images/2016/06/1-KiHtk4e8Qtcu1kNNJpBl-g.png)

Place an easily identifiable search box in the top of the screen, with an open-text field

Accompany Search Box With Magnifying-glass Icon

There are a few icons that enjoy mostly universal recognition from users. Magnifying-glass icon is the one of such icons. Users recognize a magnifying-glass icon as meaning ‘search’ even without a textual label.

You should use a schematic icon, the simplest version of the magnifying glass, because fewer graphic details speed up recognition:

Magnifying-glass icon

##Scope Bar (Apple iOS Only) In iOS, search can have an accompanying scope bar, which enables the users to quickly select the scope of their search, i.e. with clearly defined criteria or category. ![](/content/images/2016/06/0-91DyWl0XRtcNMCO6.png)

A scope bar can be added to a search bar to let people refine the scope of a search.

However, it’s better to improve search results so that users don’t need to scope their search.

2. Interpreting The Query

Search forces users to work more because not only they must come up with a query, but they also must type it. Typing is error prone and time consuming activity (especially on a mobile screens).

Goal: Try to reduce users data entry effort and provide immediate results.

Auto-suggestions

Typical users are very poor at query formulation: If they don’t get good results on the first try, later search attempts rarely succeed. In fact, they often give up. Auto-suggestions mechanism helps users to find a proper query by trying to predict it based on the entered characters. When autocomplete suggestions work well they help the user articulate better search queries.

Auto-suggestion mechanism isn’t about speeding up the search process but rather about guiding the user and helping them in constructing their search query.

Auto-suggestions tool can reduce the likelihood of user errors

But ensure that auto-suggestions are *useful.* Poorly designed auto-suggestions can confuse and distract users. So use a spelling auto-corrections, recognition of root words, and predictive text in order to improve the tool. ![](/content/images/2016/06/1-WaNJUQTJkJeYQQgRkPjxNA.png)

Image credit: thinkwithgoogle

##Recent Searches Apps should store all interactions, including recent searches and recent purchases, in order to provide this data to the user the next time they conduct a search. It benefits the user in saving them time and effort in searching for the same item again, and improves the UX. ![](/content/images/2016/06/1-8rooF9IQD-tN4y8MFnjgTw.png)

Recent searches are particularly important in eCommerce apps where users conduct repeat searches and purchases. Image credit: thinkwithgoogle

#3. Search Progress Ideally when the search results are displayed *immediately*, but if it’s impossible you should provide a proper visual feedback. However, keep in mind that slow load times can frustrate users and risk loosing their attention.

Goal: Help make the user perceive that searching times are shorter than they really are.

Search Placeholders

Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second. But if search takes longer, you should at least try to make the wait more pleasant. And it’s a right time for temporary information containers.

To keep users engaged, use dummy content as text and image placeholders

##Lazy Loading Lazy loading is a common technique to use so that some results will be displayed while the rest are being loaded. This way, pages load quickly because very few products are loaded initially. ![](/content/images/2016/06/1-fV5lHY8TRbQfmevmdpXsMQ.png)

Lazy loading technique in mobile apps

For lazy-load of products, it’s good to show the text of the products first, so impatient users can scan for target products without waiting for all images to load. ![](/content/images/2016/06/1-R9OgZtpPs2_dUQpoE9XINA.png) #4. Presenting Search Results **Goal:** Ensure that search results are useful. Speed up the search process and keep users on-task toward conversion.

The First Few Search Results Are Highly Relevant

With mobile screens being so limited in the number of results they can display without the need for scrolling, ensure the user sees a set of highly relevant results (e.g. 3 or 5) by default; and only after that do they need to scroll.

Filter and Sorting

During mobile e-commerce usability study Baymard Institute observed that more than 50% of users tried to “search within” their currently navigated category path, in an attempt to “filter the product list on my screen with a search query”. However, 94% of mobile e-commerce sites and apps do not support such behavior.

Users become overwhelmed when their search terms result in seemingly irrelevant and/or too many results. Filter and sort options can help users narrow and organize their results, which otherwise requires extensive (and excessive) scrolling or pagination on a small screen.

Left: Option for filtering or sorting is excluded, requiring users to review too many items. Image credit: thinkwithgoogle

##‘Search With’ Field This option has the benefit of encouraging users to “search within” instead of applying traditional filters, which can provide your users with incredible control over the product list. Below you can see an example of dedicated ‘Search With’ field: ![](/content/images/2016/06/1-N4agw7Aq8MLonTsYdPJoLQ.png)

At NewEgg users are allowed and encouraged to search within the current navigated category.

##Useful “No results” Page When users search, some will inevitably end up at a “no results” page. Poorly designed ‘no result’ page can be a dead-end for the user. ![](/content/images/2016/06/1-9nTH9EOzJb2VHOKF8S146A.png)

A “no results” page as seen at HP example is a dead-end for the user.

You should avoid giving users dead-ends in their experience when their search produces no matching results. Provide valuable for user alternatives when there are no matching search results, such as products from the similar category. To assist the user further you could employ an ‘intelligent search’ feature that covers singular, plurals and misspellings, etc. ![](/content/images/2016/06/1-D0QfD0F-4ajyzNZ2P8iQbw.png)

Amazon has search query suggestions at the no-results page

5. Guided Navigation (Product Categories)

User-friendly Menu Categories

Users struggle to interpret and distinguish menu categories that do not align with their expectations for categories. Menu categories should be clear with no overlap. This is particularly important when a user turns to a menu as a last resort after exhausting options through search.

Product categories should be distinct in order to avoid confusion. Image credit: thinkwithgoogle

Conclusion

Given that 30% of all online shopping purchases now happen on mobile phones, the stakes have never been higher for eCommerce apps and sites. Your app/site must accommodate all types of searches and return relevant results for categories, products, and product characteristics. When mobile retail experiences are frictionless, consumers are more likely to not just search but buy on their phones.