Mobile Optimization Tips For Designing Site Search And Product Filtering

June 28, 2024

September 18, 2024

•

7 min read

Mobile commerce, also known as M-commerce, is on a rise with a lot of significant M-commerce trends thanks to the popularity of smartphones and tablets. In fact, e-commerce traffic from those small screen devices has been surpassing desktop traffic, with a significant proportion of 65% in 2019.

→ You may also want to know these tips to optimize M-commerce performance for SMB.

Despite attracting a significant amount of traffic, mobile sales are still lagging. For 2 years consecutively, client data from SaleCycle indicates that mobile spending is $73 less than that of the desktop counterpart.

“Though mobile commerce has been growing for some years, the gap between mobile traffic and sales suggests that many retailers and websites still need to work on their mobile user experience.” - Graham Charlton, editor-in-chief at SaleCycle.

Why M-commerce is on the rise but mobile sales not as high?

Baymard Institute has carried out an extensive mobile e-commerce benchmark study to uncover the pitfalls and the main problem - product finding.

Only when shoppers can find the right product with ease, will they proceed to payment. This article provides practical tips for you to optimize site search and filter systems.

Without further ado, let's get started!

3 mobile characteristics to consider when designing mobile-friendly site search and product filter

Screen size

The major difficulty when transferring the search bar and the filters in Shopify from desktop to mobile is the limited space of mobile screens. If you bring the same design for the desktop to mobile and just resize the elements, it will never work.

Customers behave differently on mobile devices, so mobile optimization needs to involve redesigning the look and the behavior of your site search and product filter.

Virtual keyboards

Smartphones are not usually accompanied by physical keyboards and it's common for mobile users to use the virtual keyboard on the screen. Therefore, they will mainly use 2 thumbs instead of 10 fingers to input the keyword, which is prone to mistyping, resulting in no products found.

Moreover, customers can search on mobile in many conditions, for example when they are exercising, waiting for a bus… These multi-tasking habits can lead to misspellings too.

Therefore, you’ll need to prepare your site searches for both misspellings and suggestions to smoothen out customers’ product search tasks.

Unstable internet connectivity

Customers have their phones with them all the time so they tend to use mobile data to gain internet access. However, the 3G/4G or 5G networks are not stable.

Although the cellular network providers promise lightning-fast speed, it depends on the coverage of the providers and the data plan the customers pay to achieve the maximum capacity.

There are times when users run out of mobile data or the internet connection is interrupted, so you need to take this into account when designing a mobile search and filter.

Best UI/UX practices for mobile site search

Together with the navigation menu, the search bar is a helpful assistant for online shoppers. More importantly, many studies prove that searchers have a much higher conversion rate than regular browsers. As a result, optimizing mobile site search can give your sales a real boost.

Let's first look at the UI design of the search bar on mobile.

Site-wide pattern search field

If you want customers to pay attention to something, you need to make it prominent. That's why the full-length search field is common in e-commerce design for the mobile experience.

Similar to the design of the desktop counterpart, search is usually placed on top of the page on mobile view so visitors can instantly notice after getting to the site. To give them a nudge for searching around, add some placeholder text with conversational messages.

From fashion, home decoration to grocery, e-commerce sites implement a screen-wide search bar to encourage visitors to search. (Source: Red Dress, Fenton & Fenton, Yummy Bazaa

Besides the full-length search field, many M-commerce sites follow a pattern of hiding search behind the magnifying glass icon in the site-wide menu.

By tapping this icon, the search field will show up. Tap again, it is hidden. Although 35% of mobile websites in Baymard's testing use this design, there is a serious trade-off since most customers associate the magnifying glass icon with a search submit button.

Search box design

To make the search bar stand out but still harmonize with the overall design, you should choose the white background color for the search field and have a thin border with low opacity.

The magnifying glass icon can be another highlight with a darker shade. The search icon can also be integrated with the “submit” function, which plays a significant role in M-commerce UX.

On a mobile usability test, Baymard found that shoppers will look toward a search submission button instead of using the touch keyboard to submit their search queries.

Best UI/UX practices for mobile product filter

The filter is one of the hardest elements when it comes to mobile-optimized design. The smartphone viewport is so small that you can't show both the product list with the filter tree as the usual setup on the desktop. Neither can you just ignore the filtering.

It's necessary for shoppers to narrow down the search results or the items in a collection and find what they want.

An expandable and collapsible filter tree is the general answer to this dilemma. However, it's not optimized enough.

Below are some more tips for you to design the filter system on your mobile commerce site.

Separate Filter and Sort

Sorting is in many cases far more useful than filtering.

Take price as an example. Sorting by price from low to high involves fewer actions to bring the desired items to price-sensitive shoppers.

If you combine sorting with the collapsible filter tree, those customers will need to take a few extra steps by opening the filter and scrolling down to the “Sort by" options to be able to get the product list in their preferred order.

Although it's important to optimize any space on a mobile site, Filter and Sort deserve their own space. (Source: Headphone Zone, Northern Brewer, Fenton & Fenton)

“Up to top" button

By default, Filter and Sort are placed on top of the product list and are collapsed.

A pinned filter is also a good idea to enhance UX as customers won't have to scroll up to update the filter options. However, it takes up the space for product showcase.

You can opt for an “up to top” button like the upward arrow on Northern Brewer's mobile version in the middle picture above.

2-column layout for filter option list

The collapsible filter tree can get more organized and optimized by using a 2-column display for the filter options. A long 1-column list is annoying since customers need to scroll further and further to find the right option.

Camilla’s filter looks neat and clean despite a lot of filter options thanks to the 2-column layout.

Avoid native UI of the mobile devices

Finally, don’t rely on the native UI.

The default design of the mobile devices is not made for mobile commerce or your brand, so it has many drawbacks and doesn't match the overall styling.

Yummy Bazaar uses the native UI on iPhone for the sorting list, which blocks one-third of the mobile viewport. The sorting list on Headphone Zone, on the other hand, has a custom design, which goes in harmony with the site.

Before you leave

Site search and filtering have a powerful impact on e-commerce conversion rates. Therefore, both need to be optimized for mobile shoppers, a growing customer pool.

When product finding on mobile devices is convenient, customers will be more satisfied and more likely to convert. Apply the above-mentioned tips to acquire more sales on mobile for your e-commerce site.

Looking for more design tips for site search and filter on desktop? Check out 5 Best UI/UX Practices For Your Filter Design

Follow and get the latest E-commerce updates from our Facebook, LinkedIn, Twitter, or Youtube. We'll be back very soon.

Trusted by fast-growing brands

Start your 21-day free trial

Get started

Ellie Ho

•

Content Marketing Specialist

September 18, 2024

•

7 min read

There's More

Mobile Optimization Tips For Designing Site Search And Product Filtering

Shopping shouldn’t feel like a chore

Start your 21-day free trial

Related Posts

Semantic Search for Shopify: Everything You Need To Know (2026 Update)

Everything An eCommerce Store Owner Needs To Know About Dynamic Filtering

[Infographic] Dig Into Search Foundation Of Boost AI Search & Discovery