Search by Algolia
Haystack EU 2023: Learnings and reflections from our team
ai

Haystack EU 2023: Learnings and reflections from our team

If you have built search experiences, you know creating a great search experience is a never ending process: the data ...

Paul-Louis Nech

Senior ML Engineer

What is k-means clustering? An introduction
product

What is k-means clustering? An introduction

Just as with a school kid who’s left unsupervised when their teacher steps outside to deal with a distraction ...

Catherine Dee

Search and Discovery writer

Feature Spotlight: Synonyms
product

Feature Spotlight: Synonyms

Back in May 2014, we added support for synonyms inside Algolia. We took our time to really nail the details ...

Jaden Baptista

Technical Writer

Feature Spotlight: Query Rules
product

Feature Spotlight: Query Rules

You’re running an ecommerce site for an electronics retailer, and you’re seeing in your analytics that users keep ...

Jaden Baptista

Technical Writer

An introduction to transformer models in neural networks and machine learning
ai

An introduction to transformer models in neural networks and machine learning

What do OpenAI and DeepMind have in common? Give up? These innovative organizations both utilize technology known as transformer models ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What’s the secret of online merchandise management? Giving store merchandisers the right tools
e-commerce

What’s the secret of online merchandise management? Giving store merchandisers the right tools

As a successful in-store boutique manager in 1994, you might have had your merchandisers adorn your street-facing storefront ...

Catherine Dee

Search and Discovery writer

New features and capabilities in Algolia InstantSearch
engineering

New features and capabilities in Algolia InstantSearch

At Algolia, our business is more than search and discovery, it’s the continuous improvement of site search. If you ...

Haroen Viaene

JavaScript Library Developer

Feature Spotlight: Analytics
product

Feature Spotlight: Analytics

Analytics brings math and data into the otherwise very subjective world of ecommerce. It helps companies quantify how well their ...

Jaden Baptista

Technical Writer

What is clustering?
ai

What is clustering?

Amid all the momentous developments in the generative AI data space, are you a data scientist struggling to make sense ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What is a vector database?
product

What is a vector database?

Fashion ideas for guest aunt informal summer wedding Funny movie to get my bored high-schoolers off their addictive gaming ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Unlock the power of image-based recommendation with Algolia’s LookingSimilar
engineering

Unlock the power of image-based recommendation with Algolia’s LookingSimilar

Imagine you're visiting an online art gallery and a specific painting catches your eye. You'd like to find ...

Raed Chammam

Senior Software Engineer

Empowering Change: Algolia's Global Giving Days Impact Report
algolia

Empowering Change: Algolia's Global Giving Days Impact Report

At Algolia, our commitment to making a positive impact extends far beyond the digital landscape. We believe in the power ...

Amy Ciba

Senior Manager, People Success

Retail personalization: Give your ecommerce customers the tailored shopping experiences they expect and deserve
e-commerce

Retail personalization: Give your ecommerce customers the tailored shopping experiences they expect and deserve

In today’s post-pandemic-yet-still-super-competitive retail landscape, gaining, keeping, and converting ecommerce customers is no easy ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Algolia x eTail | A busy few days in Boston
algolia

Algolia x eTail | A busy few days in Boston

There are few atmospheres as unique as that of a conference exhibit hall: the air always filled with an indescribable ...

Marissa Wharton

Marketing Content Manager

What are vectors and how do they apply to machine learning?
ai

What are vectors and how do they apply to machine learning?

To consider the question of what vectors are, it helps to be a mathematician, or at least someone who’s ...

Catherine Dee

Search and Discovery writer

Why imports are important in JS
engineering

Why imports are important in JS

My first foray into programming was writing Python on a Raspberry Pi to flicker some LED lights — it wasn’t ...

Jaden Baptista

Technical Writer

What is ecommerce? The complete guide
e-commerce

What is ecommerce? The complete guide

How well do you know the world of modern ecommerce?  With retail ecommerce sales having exceeded $5.7 trillion worldwide ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Data is king: The role of data capture and integrity in embracing AI
ai

Data is king: The role of data capture and integrity in embracing AI

In a world of artificial intelligence (AI), data serves as the foundation for machine learning (ML) models to identify trends ...

Alexandra Anghel

Director of AI Engineering

Looking for something?

facebookfacebooklinkedinlinkedintwittertwittermailmail

In part 1 of this series on mobile UX design, we talked about how designing a successful search user experience for people on mobile devices means overcoming certain usability challenges, from limited mobile screen space to inflated user expectations. In this second post, we’ll look at how you can avoid novice design mistakes, implement winning design patterns, and ensure that your users can effectively pull up the best search results by implementing the right mobile UI elements.

The ways you choose to guide searchers through your mobile user experience and navigate your user interface will depend on the size and complexity of your data set, your visitors’ expected knowledge of the data set they’re searching, and how much you should try to balance search intent with more organic item “discovery.” Regardless of those nuances, when it comes to mobile search, there are certain tried-and-true approaches.

Invite mobile users to search

The search bar is the point of entry for much of what will happen in your mobile application or on your web pages. If the majority of your users want to start off on your site or in your app by enlisting the guidance of a knowledgeable search engine, this field should be prominently nestled on the home page or easily called up by clicking an eye-catching search icon (such as a magnifying glass).

You can reinforce for your site visitors or app users that they’re looking at the search bar, which awaits their input and is ready to provide a helpful search experience, by adding hint text (a placeholder). Here’s a screenshot of Spotify’s version:

Is search something that people might want to use only on certain parts of your site or in certain areas of your app? Then a contextual search icon is a less-in-your-face option: You display an icon only where searching makes sense.

Provide search filters and facets

Shirt or blouse? Which brand? What color?

In an ecommerce app teeming with items, filters and facets can help searchers reduce the number of relevant search results and scrolling they’ll get bombarded with. It’s always a plus for etailers when customers can quickly zero in on The One instead of slogging through tooo many possibilities and potentially losing interest in the process.

What’s the difference between filters and facets? After all, aren’t facets just a form of filtering?

Well, yes. But filters are typically static entities. For example, if someone is searching Amazon for “laptop”, they can select basic filters such as the brand name on a drop-down list. 

Filtering options are one indication that a company has set up a mobile interface with advanced search options, should they be needed. As a business, you can consult your metadata to determine the right filter options to provide in order to guide users.

Facets are dynamic lists of categories that change based on the type of search. A good example: considering various levels of user needs. In this Amazon search for a laptop, which could produce some pretty pricey models, the facet “Under $500” caters to people who may need to stick to a budget: 

With filtering, show feedback

With small-screen real estate, it’s hard to include both filters and search results in the view without creating a cluttered mess. Sometimes you can squeeze in a few key filters at the top of the screen, but it might make more sense to present a dedicated view of all the possible filters.

Good mobile filtering experiences have one thing in common: some type of feedback is displayed when a filter is selected. For example, the Airbnb app adjusts the number of results available for each activity type:

Anticipate what people might want

One way to make every tap count for your users is to provide autocomplete as an element of your mobile interface design. With this functionality, instantaneous search-query “guesses” update for users as their search terms are being entered.

Implement spelling and typo tolerance

If a customer misspells a query, you don’t want them to get a “No results” page. And then there are typos: it’s especially easy for people using mobile devices to create typos with their tiny keyboards. The solution is to proactively detect and suggest corrections for misspellings. 

Here’s how YouTube figures out what’s wanted despite a spelling error:

Offer query-related suggestions

Query suggestions typically appear below the search bar as someone is entering a phrase. These suggestions may seem directly related, but they’re not necessarily. Query suggestions help users find queries that are guaranteed to return results.

They could be analytics-generated popular search queries that have been entered by others, which have the potential to entice the searcher into something that may also look interesting or related enough to jump to. 

Or, they could be more-complete queries based on the searcher’s entered term. Let’s say you’re ready for your next Apple iOS or Android device, and you enter “iphone” in the search box on Google. The suggestions could be more-specific queries related to various recent models, such as “iPhone 14 Pro Max”:

Given that query suggestions constitute an extra step for the user, who may naturally be overwhelmed by all the choices, they’re most helpful when a site or app has a large data sets. By essentially asking “Are any of these what you’re looking for?”, they help guide the searcher through all the options to the most relevant items.

Be proactive with instant results

People on mobile search missions expect the experience to be instantaneous, not only with respect to how fast their results are fetched but how frequently they’re updated. So instead of waiting for the user to enter a full query, you can display anticipatory, dynamic, as-they-type search results from their first keystroke.

One option is to pull up actual search results with each keystroke and display them on the results page. This approach is most effective when the data set is either more limited or the user has a more defined idea of what they need.

Another approach is for a mobile UI to divide its screen real estate by showing a limited number of items for each type of content (e.g., in a music-streaming app, five artists and five bands). The most relevant results appear on these lists, and you can include “Show more” buttons at the bottom of each.

Combine suggestions with instant results

Suggestions and instant results together are a good way to optimize your mobile design when you have a very large dataset and want to both guide the user and determine whether a good match has been made. For example, the Google Play app store might show an app search result it thinks could be the right one, along with query suggestions below it in case that result misses the mark. 

Offer federated search

If you have an enterprise-level search application, consider providing the comprehensive option of federated search. Along with search results, you can include recent searches, popular searches, and content gathered from multiple indices, all in a single search-results interface.

Offer the option to voice search

Mobile apps are increasingly offering the option of voice searching, letting users enter search queries by speaking into a microphone as they’re on the go. For example, Google Maps lets people conveniently speak search queries while driving.

Don’t leave the search-transition screen blank

So in your search UI, your searcher has entered a query, perhaps chosen a query suggestion, and clicked the magnifying-glass icon. They can relax with a nice blank screen or progress-bar indicator that their search has commenced and they’ll soon be seeing some great results.

Yes, you can provide that Zenlike in-app break for them as part of your UI design, however, the transition page to their search results is an opportunity to engage them a bit — based on what you know about their search querying so far — even before they get to their search results. So instead of an empty page in your search UX, you can give them suggestions, in case they weren’t specific enough with what they entered. Your search functionality can also show them real-time trending or recent searches, or categories they might like to explore, either instead of or in addition to their current search interest.

Next stop: the search results page

Now that you’ve gotten some UI/UX design inspiration and preliminary ways to utilize strong mobile app design to aid the search process, you’re ready for part 3: optimally structuring mobile search results. 

About Algolia

About the author
Vincent Caruana

Sr. SEO Web Digital Marketing Manager

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 3: Optimizing display of search results
ux

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

How to streamline your search UX design
ux

Catherine Dee

Search and Discovery writer