Steal These Mobile Search Practices to Improve Your E-shop UX

You’ve probably heard it dozens of times, that Picasso once said: “Good artists copy, great artists steal”. When it comes to mobile UX, sometimes it’s better to use a design that already works well on bigger e-commerce websites rather than trying to reinvent the wheel. Here’s our guideline of what you can set up instantly.

Mobile Shopping Behavioral Pattern

To better understand why the following examples of mobile search UX are greater than other design solutions, let’s look into the way users act while surfing the internet.

One-third of customers use their mobile phones just to browse for products and take screenshots to find them later at a physical store or from another device. The purpose to start their journey is solely to discover something new. They don’t have the intent to buy anything right away.

Data also shows that during mobile website browsing people are much more prone to impulse buying. Some products have even accounted for 80% of buying. According to mobile shopping behavior studies, the more time the user spends on browsing, the higher the probability of unplanned buying.

And purchase intention grows with quality product information, convenient navigation, and effective search. So, with the right mobile UX, it’s possible to encourage those users who were not planning it to buy something.

Mobile Search Best Practices

When it comes to search UI and navigation, designers consider the smartphone screen limitations. There is no single solution. Depending on what desktop website looks like, one can choose between design options: responsive and adaptive. Responsive design supposes that it responds to changes in browser width by adjusting the placement of desktop design elements to fit in the limited space. Adaptive design means that different layouts of the same website developed for different screen sizes. The current industry standard is six resolutions: 320px, 480px, 760px, 960px, 1200px, and 1600px. According to the study, 42% of small businesses also develop a mobile app.

Most of the websites choose a responsive design, as it’s easier. For good desktop e-commerce designs, it’s common for the search bar to occupy the central part of the header. Prominent search bar draws immediate attention and motivates customers to start shopping and browsing at once. So, in a responsive mobile version of the website, it’ll be the same:

For the auto parts retailers, the Year-Make-Model widget is more important than the search box. That’s why in the mobile version the central part is given to auto parts fitment widget, and the search bar is hidden under the universally recognized magnifying glass icon:

Considering the user’s shopping journey, the search box/widget is made more visible and accessible.

There is another important difference. Desktop users are typically more logical — checking the number of products on the page, the applied filters, the number of results pages, etc. The mobile shopper is browsing and buying on a whim, being less critical, and needing less information at the instant. So, all the extensive information is hidden in the mobile version.

Other effective mobile search practices include:

• Autocomplete and suggestion inside the search bar
• Recent and saved searchers
• Slide-in filter panel
• Search results view options
• Infinite scroll

Autocomplete and Suggestions

As the user types his query, the word should be auto-filled and suggestions have to appear under the box. It’s a “principle of least effort” in the action. The fewer effort shoppers need to put into finding the product, the higher the probability of them buying it. People, in general, prefer the path of least resistance. Providing your users with relevant default searches can save customers valuable time, and increase conversions.

AliExpress and IKEA suggest frequently inputted queries even before the user starts to type inside the bar.

Recent and Saved Searchers

Reminding your customers what they were looking for recently or even the last time they visited your e-commerce website is a smart way to ease their shopping journey. It helps users find what they’re looking for faster and even encourages them to finally make a purchase. Wayfair knows that and remembers their customers browsing history:

Slide-in Filter Panel

Let your user filter and sort results without cluttering up the limited capabilities of the screen. There are several ways for filters to appear and hide. Filters may show up as a panel from sides or overlay the whole screen. Panel behavior might have different patterns, too. For example, on Stage3Motorsports website filter panel disappears each time the user chooses a filtering option, and the results page immediately modifies. On the contrary, on the RugsDoneRight mobile website, the user chooses all the filtering options they want, closes the filter panel and receives matching product results.

Due to screen limits, it’s better to show only the most popular and relevant filtering options first, and hide less important filters under the “Show more” button. This helps users quickly scan the options and to be more focused and engaged while browsing.

Search Results View Options

Depending on what products you sell, the most effective view options might be different. Products, which users consider buying based on details like SKU, ratings, and dimensions, better to organize in the list view. And for products where visual representation is more important than the description — the grid view is logical. What will be better — to choose the default view or let them switch between two modes, depends on your industry and what brings the most value to your customers? If you want to learn more about list and grid view options in terms of mobile UX, please check out this article!

Infinite Scroll

The mobile user’s natural interaction with the website is scrolling the page until the end of the results page. So, avoid pagination and let search results gradually load or place the “Show more” button.

A bonus

We prepared a collection of all of the mentioned UI components and above, that you can use for inspiration. Download it here.

Originally published at https://convermax.com on March 30, 2020.