// How to Design User Experience Search for Mobile eCommerce? - CanCode.io | eComm/Web/UXUI Design & Development - 2023 Blog Details

CanCode.io Blog

Latest Articles
BlogConversion Optimzation How to Design User Experience Search for Mobile eCommerce?

How to Design User Experience Search for Mobile eCommerce?

You can't sell something that can't be found by your customers. Search is one of the most important things to do on a mobile device, and it's also a key part of making a profitable app or website. Users expect to find and learn about products easily within an app, and they often make quick decisions about an app's worth based on the quality of one or two sets of search results.  A good search tool should make it easy for users to find what they want quickly. We'll figure out how to do it in this article.  

1. Search Placement

When people are looking for a search, they often move quickly and furiously. Most of the time, they look at a page to find "the little box where I can type."  Goal: Design a search bar to be clearly visible and quickly recognizable.

Put the search field in a prominent place

Search is an important part of eCommerce apps and sites, and it should be easy to find because it can help users find things quickly. Apps that don't have a search box in a clear place can make users angry and slow them down.   [caption id="attachment_9477" align="aligncenter" width="486"] Left: The search functionality is hidden behind a menu option.[/caption]   Search should be at the top of the home screen for e-commerce apps (and if the home screen is long, repeat it at the bottom). For apps with a lot of items, making the search field the default setting would make it easy to find and quick to use.   [caption id="attachment_9478" align="aligncenter" width="249"] Place an easily identifiable search box at the top of the screen, with an open-text field.[/caption]

Add a magnifying-glass icon to the search box

There are a few icons that users recognize almost all of the time. One of these icons is the magnifying-glass icon. Users know that a magnifying glass icon means "search" even if it doesn't say so in words.  You should use a schematic icon, which is the simplest version of the magnifying glass, because fewer graphic details make it easier to recognize:    

Scope Bar (Apple iOS Only)

In iOS, a search can come with a scope bar that lets users quickly choose the scope of their search based on clearly defined criteria or categories.   [caption id="attachment_9479" align="aligncenter" width="640"] A scope bar can be added to a search bar to let people refine the scope of a search.[/caption] But it would be better to improve search results so people don't have to narrow their searches.

2. Understanding the Query

Search makes people work harder because they have to come up with a query and then type it. Typing is hard to do well and takes a long time (especially on a mobile screen).  Goal: Try to reduce users data entry effort and provide immediate results.

Auto-suggestions

Most users aren't very good at making good queries. If they don't get good results on the first try, they rarely do better on subsequent searches. Most of the time, they give up. Auto-suggestions help users find the right query by trying to guess what it is based on the characters they enter. When they work well, autocomplete suggestions help the user write better search queries.  Auto-suggestions are not meant to speed up the search process. Instead, they are meant to guide the user and help them form their search query.   [caption id="attachment_9480" align="aligncenter" width="274"] Auto-suggestions tool can reduce the likelihood of user errors.[/caption]   But ensure that auto-suggestions are useful. Auto-suggestions that aren't well-made can confuse and distract users. So use spelling corrections, root word recognition, and predictive text to make the tool better.    

Recent Searches

Apps should keep track of everything the user does, including recent searches and purchases, so that the next time the user does a search, the app can show them this information. It helps the user because they don't have to look for the same thing again, which saves them time and effort and makes the UX better.   [caption id="attachment_9482" align="aligncenter" width="550"] Recent searches are particularly important in eCommerce apps where users conduct repeat searches and purchases.[/caption]

3. Search Progress

  If possible, the search results should be shown right away, but if that's not possible, you should give good visual feedback. But keep in mind that slow load times can annoy users and make them lose interest.  Goal: Help make the user perceive that searching times are shorter than they really are.

Search Placeholders

When there is a delay of more than 0.1 second but less than 1 second, there is usually no need for extra feedback. But if the search takes longer than usual, you should at least try to make the time pass more quickly. And now is a good time for temporary containers of information. [caption id="attachment_9483" align="aligncenter" width="283"] To keep users engaged, use dummy content as text and image placeholders.[/caption]

Lazy Loading

Lazy loading is a technique that is often used to show some results while the rest are loading. This way, pages load quickly because they don't have to load a lot of products at once.   [caption id="attachment_9484" align="aligncenter" width="285"] Lazy loading technique in mobile apps.[/caption] For slow-loading products, it's best to show the text of the products first. This way, users who aren't very patient can scan for the products they want without having to wait for all the images to load.  

4. Showing Search Results

Goal: Make sure that the results of a search are useful. Quicken the search process and keep people on task so they can convert.

The First Few Search Results Are Very Good Matches

Because mobile screens can only show so many results without having to scroll, make sure the user sees a set of highly relevant results (like 3 or 5) by default. Only after that should they have to scroll.

Filter and Sorting

During a study of the usability of mobile e-commerce, the Baymard Institute found that more than half of users tried to "search within" the category path they were on in order to "filter the product list on my screen with a search query." 94% of mobile e-commerce sites and apps, though, don't let you do this.  Users get confused when their search terms bring up a lot of results that don't seem relevant or are too many. Filter and sort options can help users narrow down and organize their results, which would be hard to do on a small screen without a lot of scrolling or paging.   [caption id="attachment_9486" align="aligncenter" width="640"] Left: The option for filtering or sorting is excluded, requiring users to review too many items.[/caption]  

‘Search With’ Field

With this option, users are more likely to use "search within" instead of traditional filters, which can give them a lot of control over the product list. You can see an example of a "Search With" field down below:   [caption id="attachment_9487" align="aligncenter" width="281"] At NewEgg users are allowed and encouraged to search within the current navigated category.[/caption]

The "No results" Page Is Useful

Some people who search will always end up on a page that says "no results." A "no results" page that isn't well made can be a dead end for the user.   [caption id="attachment_9488" align="aligncenter" width="306"] A “no results” page as seen at HP example is a dead-end for the user.[/caption]   You should try to avoid giving users dead ends when their search doesn't turn up any results. When there are no search results that match, give the user useful alternatives, like products from the same category. You could help the user even more by adding an "intelligent search" feature that looks for singular, plural, misspelled words, etc.    [caption id="attachment_9489" align="aligncenter" width="303"] Amazon has search query suggestions at the no-results page.[/caption]

5. Guided Navigation (Product Categories)

User-friendly Menu Categories

Users have a hard time understanding and telling the difference between menu categories that don't match their expectations for categories. The groups on a menu should be clear and not overlap. This is especially important when a user uses a menu as a last resort after searching has run out of options.    [caption id="attachment_9490" align="aligncenter" width="551"] Product categories should be distinct in order to avoid confusion.[/caption]

Conclusion

Now that 30% of all online shopping is done on mobile phones, eCommerce apps and sites have never had more at stake. Your app or website needs to be able to handle all kinds of searches and give the right results for categories, products, and product features. When mobile shopping is easy, people are more likely to do more than just look for things on their phones. 
TOPICS:

Start to build your project with CanCode.io

Get free online marketing tips and resources delivered directly to your inbox.

Please Wait

Thank you for sign up!

No charge. Unsubscribe anytime.

Comment Policy

We welcome relevant and respectful comments. Off-topic comments and spam will be removed.

Leave a Reply

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

Start to build your project with CanCode.io

Get free online marketing tips and resources delivered directly to your inbox.

Please Wait

Thank you for sign up!

No charge. Unsubscribe anytime.

Categories
Popular Blogs
Latest Blogs

Subscribe to get tips and tactics to grow the way you want.

Please Wait

Thank you for sign up!

© CanCode.io