Search by Algolia
What is retail analytics and how can it inform your data-driven ecommerce merchandising strategy?
e-commerce

What is retail analytics and how can it inform your data-driven ecommerce merchandising strategy?

There is such tremendous activity both on and off of retailer websites today that it would be impossible to make ...

Catherine Dee

Search and Discovery writer

8 ways to use merchandising data to boost your online store ROI
e-commerce

8 ways to use merchandising data to boost your online store ROI

New year, new goals. Sounds positive, but looking at your sales data, your revenue and profit aren’t so hot ...

John Stewart

VP, Corporate Communications and Brand

Algolia DocSearch + Astro Starlight
engineering

Algolia DocSearch + Astro Starlight

What is Astro Starlight? If you're building a documentation site, your content needs to be easy to write and ...

Jaden Baptista

Technical Writer

What role does AI play in recommendation systems and engines?
ai

What role does AI play in recommendation systems and engines?

You put that in your cart. How about this cool thing to go with it? You liked that? Here are ...

Catherine Dee

Search and Discovery writer

How AI can help improve your user experience
ux

How AI can help improve your user experience

They say you get one chance to make a great first impression. With visual design on ecommerce web pages, this ...

Jon Silvers

Director, Digital Marketing

Keeping your Algolia search index up to date
product

Keeping your Algolia search index up to date

When creating your initial Algolia index, you may seed the index with an initial set of data. This is convenient ...

Jaden Baptista

Technical Writer

Merchandising in the AI era
e-commerce

Merchandising in the AI era

For merchandisers, every website visit is an opportunity to promote products to potential buyers. In the era of AI, incorporating ...

Tariq Khan

Director of Content Marketing

Debunking the most common AI myths
ai

Debunking the most common AI myths

ARTIFICIAL INTELLIGENCE CAN’T BE TRUSTED, shouts the headline on your social media newsfeed. Is that really true, or is ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

How AI can benefit the retail industry
ai

How AI can benefit the retail industry

Artificial intelligence is on a roll. It’s strengthening healthcare diagnostics, taking on office grunt work, helping banks combat fraud ...

Catherine Dee

Search and Discovery writer

How ecommerce AI is reshaping business
e-commerce

How ecommerce AI is reshaping business

Like other modern phenomena such as social media, artificial intelligence has landed on the ecommerce industry scene with a giant ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

AI-driven smart merchandising: what it is and why your ecommerce store needs it
ai

AI-driven smart merchandising: what it is and why your ecommerce store needs it

Do you dream of having your own personal online shopper? Someone familiar and fun who pops up every time you ...

Catherine Dee

Search and Discovery writer

NRF 2024: A cocktail of inspiration and innovation
e-commerce

NRF 2024: A cocktail of inspiration and innovation

Retail’s big show, NRF 2024, once again brought together a wide spectrum of practitioners focused on innovation and transformation ...

Reshma Iyer

Director of Product Marketing, Ecommerce

How AI-powered personalization is transforming the user and customer experience
ai

How AI-powered personalization is transforming the user and customer experience

In a world of so many overwhelming choices for consumers, how can you best engage with the shoppers who visit ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

Unveiling the future: Algolia’s AI revolution at NRF Retail Big Show
algolia

Unveiling the future: Algolia’s AI revolution at NRF Retail Big Show

Get ready for an exhilarating journey into the future of retail as Algolia takes center stage at the NRF Retail ...

John Stewart

VP Corporate Marketing

How to master personalization with AI
ai

How to master personalization with AI

Picture ecommerce in its early days: businesses were just beginning to discover the power of personalized marketing. They’d divide ...

Ciprian Borodescu

AI Product Manager | On a mission to help people succeed through the use of AI

5 best practices for nailing the ecommerce virtual assistant user experience
ai

5 best practices for nailing the ecommerce virtual assistant user experience

“Hello there, how can I help you today?”, asks the virtual shopping assistant in the lower right-hand corner ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

Add InstantSearch and Autocomplete to your search experience in just 5 minutes
product

Add InstantSearch and Autocomplete to your search experience in just 5 minutes

A good starting point for building a comprehensive search experience is a straightforward app template. When crafting your application’s ...

Imogen Lovera

Senior Product Manager

Best practices of conversion-focused ecommerce website design
e-commerce

Best practices of conversion-focused ecommerce website design

The inviting ecommerce website template that balances bright colors with plenty of white space. The stylized fonts for the headers ...

Catherine Dee

Search and Discovery writer

Looking for something?

facebookfacebooklinkedinlinkedintwittertwittermailmail

Did you know that 86% of the global population uses a smartphone? The 7 billion devices connected to the Internet represent 55% of the worldwide web traffic. It’s different by continent, too. In Africa and Asia it represents more than 70% of Internet traffic, about a third in North America, and about 53% in Europe.

Of course, that’s purely by region. When we look more specifically by industry we see that retail dominates the game with over 73% of mobile web usage.

So what does this teach us?

Ultimately, that mobile is not simply a “nice-to-have.” Businesses need to invest into a mobile-first experience especially if they want to keep ahead of their competitors.

As someone who has worked with Algolia for 9 years in both product engineering and customer success, and worked with hundreds of customers to build engaging search and discovery solutions, I’d like to share some ways to improve the mobile experience.

This content was originally presented at Algolia DevCon September, 2023

What makes mobile different

But before we jump into best practices, let’s remind ourselves that interacting with a mobile device is way different than a desktop. First of all, not only are screens smaller, but we also interact with our fingers which are more prone to errors. Often we’re on the move, facing connectivity issues and dealing with a distracting environment. It leaves us with less control over the website or mobile app we interact with.

Not only that, when designing a mobile experience it’s important to keep in mind that everyone has a different level of comfort, tech savviness, and domain knowledge when using a mobile browser or native mobile app.

Intent is another factor to consider. For example, let’s imagine someone is looking to purchase a new pair of shoes. They might visit several websites to compare the different shoes. Eventually, they find one to buy and place an order. The next day, they go back to check on the order. And the next day after, they look again to see the status of the delivery. So, same website, three different intents.

Before optimizing your mobile website usability, it’s really important that you think in terms of the user’s journey. What are their goals and motivation? What are pains and friction that may be causing them to drop out of the session? In these scenarios, it’s best to do direct customer research with your users live or remote via a tool like UserTesting.com or HotJar. There are other resources, too, for learning best practices which I’ll share at the end of this article. For now, however, let’s dig into the 10 best practices.

Ten best practices for mobile search & discovery

I should note that while I use examples from retail ecommerce, many of these best practices apply to other use cases and industries.

1. Search needs to be easy to find.

mobile easy to find

Mobile users expect to see the search on the top right of a mobile app or mobile web browser experience. So make it visible. Make it one tap away. Don’t hide it behind a burger menu or navigation, and make sure that it visually extends so users don’t really don’t have to search for it on the UI. Try to avoid distraction near the search bar as well. This is a common pitfall because businesses tend to put banners on the very top or similar looking icons, making it harder for users to find the search bar.

In e-commerce, as over 60% of people start their session with search, it’s a best practice to make it a predominant search box like on Amazon where it takes the full screen width. Another best practice is to use placeholder text informing your users what they can search for.

2. Maximize real estate

mobile search maximize size

Caption: always test search on a real device so you can see the actual space the keyboard takes on screen

Once a user clicks on the search icon or field, you want to make sure that you maximize the screen real estate. How? By putting your search input at the very top using an autocomplete overlay. On a mobile device, due to screen constraints, actual space is around 48%. On mobile web it’s even less — just 43%.

3. Leverage the “empty query state”

mobile empty query state

After customers have located your search icon and clicked on it, they will land on a screen which we call an ‘empty query state’. This is a great opportunity to start inspiring your visitors with useful content. For instance, for your first-time users, you could display popular searches. For returning visitors, many websites display “Recent searches”. It’s also a good opportunity to provide quick access to additional functionalities. Ikea, for example, promotes their image search functionality. Some other websites also use it to promote thematic pages like FAQs, blog content, …

4. Guide users with Query suggestions

Autocomplete attempts to predict results as customers type. Suggested search terms (a.k.a “Query suggestions”) takes it a step further and offers even more convenience for mobile users working on a small screen. A best practice is to display 6 to 8 query suggestions which might include recent searches they or other customers have done, or specific “in category suggestions” which allow users to go straight away into the taped category. Furthermore, don’t miss on the opportunity to support “non product searches” and offer in addition to query suggestions and product results other types of content: such as FAQs, blog posts, or other important pages.

mobile guide users

In the screenshot above you’ll see a small arrow next to some suggested queries. This is what we call the “tap ahead”. This pattern is very convenient for users as it allows them to tap a suggestion to fill in the query; it won’t submit the query, but it will just fill it in. They can then complete it with additional search terms before submitting.

Last, don’t miss on the opportunity to return suggestions from the first keystroke: it reinforces the feeling of speed and control for the user.

5. Result page must-haves

On the Search Listing Page (SLP), you want to persist the search query. This is a must-have. Not only does it inform the user about what they’re searching for, but it also gives them direct access to the query so they can refine it (over 50% of users required two or more query iterations on average). You will also want to provide easy access to sorting and filtering options. In the example below, you can see a horizontal row of options for filtering and sorting with the most popular filters available in one tap.

mobile results page

You will want to maximize space and legibility of your product listing thumbnails displaying as much information as you can. Reviews are really important, too. In this example above, visitors can easily see and click on the reviews and other dynamic product information, such as product colors and variants.

6. Dynamic layout for content type

You should adapt the layout to the content type. By content types, I’m referring to two categories broadly: — visually driven results and spec driven results.

mobile dynamic layouts

The image on the left above is an example of visual-driven results. Many ecommerce sites go this route because their products lend themselves to this kind of “window shopping.” But, there are also cases where users make decisions based on specifications and product attributes. This is what we call spec-driven. Visual-driven content can often be displayed in a grid, but with spec-driven content it’s typically better to to go with a list layout. Often, some mobile apps or mobile sites offer the possibility of switching between one or the other to match user preferences.

7. Display filters in an overlay

display filter overlay for mobile

Filter overlays can be useful, but they’re even more useful when they only cover the page partially (learn more). You can display results behind the filter overlay. As soon as the users select a filter value, results are refreshed in real-time in the background. This is a great way to reinforce the speed and control perception from the user. For example, if a customer was to click on Brand results (in the screenshot above), it would filter instantly in the background. For this, we can use Algolia’s InstantSearch libraries which provide that behavior out of the box.

By default, it’s important to keep the filter option collapsed so users can get a breath of the available filtering options at a glance.

When a user refines results, you want to display active filters in an overview (like in the example below) from where they can easily remove them one by one, or all at once, along with displaying those at their original position.

mobile facets

Another best practice is to only display filters that relate to their search, and to minimize filters so as to make it easier for customers to find what they need. Dynamic filters are also referred to as facets. There is no need to display filters related to TV features (eg. TV size) if the visitor is searching for a vacuum cleaner. Also, order filters by popularity (often categories, brands, color, reviews and price are the most used filters). And last, make sure that you provide a sticky button to apply on those filters so users, again, don’t have to scroll and try to find where they should apply them.

8. Let users easily iterate on their search

How? By providing easy access to the current query and refinements. Some websites do it using a sticky menu on the top of the page so users can easily and quickly access search even when they scroll to the bottom of the site.

mobile search iteration

9. Keep users in control

Infinite scrolling is very tiring on Mobile Web. It prevents users from accessing the footer of your site.

infinite scrolling is a mobile antipattern
Infinite-scrolling on mobile web is an anti design pattern.

Alternatively, you can use a “Show more” button to allow your visitors to view as much as they want, and/or a progress bar which let’s users know how much content or how many products are available to them.

mobile show more button

10. No results should not be a dead end

Finally, no results should not be a dead end for your customers. There’s a lot you can do to reduce no results:

  • Typo tolerance and synonyms
  • Support “concept matching” (e.g., when using Algolia NeuralSearch)
  • Educate your users what they can search (for instance, using an explicit search placeholder — see tips #3 and #4 above)

Select a robust search engine that allows you to avoid no- or null-results at any cost so your users don’t have to deal with that situation.

fix for no results

However, if a customer does arrive on a no-results page, it’s a good practice to try to inform them on how they can rephrase their query or help them by removing active filters. Like in the example above, I searched for < $10 products on target.com and no product matched my query with this filter. So, having the UI remind me that the filter is active, and allowing me to remove it in one tap enabled me to get back to a set of results.

Ultimately, as a last fallback, you want to show popular and/or featured categories so you users can continue their exploration journey without feeling blocked or lost.

Resources

As you can see, there are a lot of UI details to think about when building a robust search experience.  Because It’s hard to keep all of them top of mind we created a Search & Discovery UI Kit, available for free on Figma Community.

Figma UI Kit for Search & Discovery

Finally, if you’re interested to explore more recommendations, we suggest you check out the following sites:

About the author
Alexandre Collin

Staff SME Business & Optimization - UI/UX

linkedintwitter

Recommended Articles

Powered byAlgolia Algolia Recommend

Mobile Search and Discovery: How to create ultra-user-friendly UX
ux

Catherine Dee

Search and Discovery writer

Mobile search UX best practices, part 2: Streamlining search functionality
ux

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Mobile search UX best practices, part 1: Understanding the challenges
ux

Vincent Caruana

Sr. SEO Web Digital Marketing Manager