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 blog-post series, we looked at app interface design obstacles in the mobile search experience.

In part 2, we examined the components of designing a search experience for mobile that avoids common pitfalls, considering the user interface needs for the mobile search bar and which search options work best to guide users on a mobile device.

Now let’s put a magnifying glass on how you can create the best search results page when creating the search experience for your mobile users.

With mobile site or app functionality, as with the design of other search features, the design of search results must be just right. There’s nothing worse than scrolling down through search results on an Apple iPhone or Android through text displayed in a cluttered or disorganized way that obscures what’s relevant. A good mobile search results page design delivers the most accurate information to help users in an easy-to-read way.

Excellent UI design for the mobile user experience also reflects the type of search being conducted. For example, with some mobile search categories — a good example being restaurants — it makes sense to display results with easily comprehensible icons denoting price, ratings, and distance from the searcher. It comes down to your particular mobile application use case and what your customers want to see on the search results pages. When you can collect all pertinent usability data and thoughtfully consider the best way to present search results for mobile screens based on what you know, the mobile design phase should be relatively easy.

Present the most relevant results

Without a commitment to excellent search relevance, you might as well not worry about how to optimize other mobile UX best practices. Relevance is super critical on mobile devices because of the tiny screen, which can accommodate such radically limited results. Because of the minimal viewing real estate, compared with regular web pages, only the top search results are visible, so they’d better be on target.

Highlight text for easy scanning

In general, people don’t like — or feel that they have time — to read everything on the search screen, especially when they’re just browsing what’s available vs. knowing exactly what they need. What they prefer to do is skim the text for information that tells them Yes, this search result seems promising.

One way to help people denote those click worthy items is proactively applying a virtual highlighter pen (or bold font or some other text treatment) for them. Highlighting the key terms — the words they typed in the search box as they appear in the search results — can streamline their information-finding experience. 

There are two effective ways to use search-result highlighting:

  • Highlighting the words that exactly match their query text. This is an intuitive way to call out the search terms as they appear in the found text. It works especially well with instant results.
  • Highlighting everything but their search query text (known as “inverted” highlighting). This lets the searcher use the highlighting to easily focus on and identify the differences between the results. Another place where this method works well is with query suggestions.

Stash their search history

Good mobile search UX design incorporates storage of people’s recent searches, plus their own personally saved searches. That way, such as when they’re in an ecommerce app and realize they liked an item they saw earlier, they can easily trace their path right back to it and avoid wasting time. And allowing people to save searches themselves for easily repeating later would be appreciated if, for instance, they’re searching for the same particular item at regular intervals.

Acknowledge failed searches

It happens: mobile searches sometimes provide no results whatsoever. When that’s the case, you can gently inform the user of the status. Even better, of course, would be to include a fairly specific explanation of what went wrong: some version of “We don’t have anything matching what you want” is a popular search response.

And don’t stop there. With UI/UX elements for mobile, when one search door closes, another could open: you can use this opportunity to help them out of the search void by suggesting helpful related or alternative content or filtering options.

Provide their results ASAP

Mobile users may not have WiFi, their 4G network may be slow, or they may be using faster 5G but have some other real-time issue. Unfortunately, any delay in the appearance of an information seeker’s search results can mean a negative user experience and lower engagement. If search results don’t show up immediately, the user may think something is wrong.

In terms of UX design, while you can’t control connectivity, the one thing you can control to meet user needs is ensuring that search results appear as instantaneously as possible. How? By designing your search feature to not compound the problem by slowing down the user experience. By optimizing your images: sizing them correctly, compressing them, using a fast-loading image format, and using pagination to limit the number of results displayed on each page.

Show a progress bar or other type of indicator in your search UI — spinning wheels, a “Loading” icon, or a progress bar — that something is happening.

You can also show a skeleton screen with placeholders:

A final way is to implement lazy loading: prioritizing certain types of content over others and fetching them separately.

Nevertheless, dreaded no-network availability will surface at some point, and it must be handled beyond just providing a “Retry” button. One solution is to cache the top results of a user’s search offline, then offer a basic local search experience. A better way is to provide a light full-fledged search engine on the device that is capable of doing most of what the online engine would do. However, this requires significant skills and resources.

Use a flattering search-results display

How will your app users want to browse your catalog items: in a list, a grid, thumbnails, “pins” on a map, or in multiple ways, with the ability to toggle back and forth? For items they’ll want to select visually, like pairs of shoes, it only makes sense to present search results as images.

Which layout works best for your products or services? Here’s how the Netflix, Etsy, and Zillow mobile apps display search results for their use cases:

Netflix’s format allows you to view a longer list of items without having to scroll. Etsy uses a grid that emphasizes eye-catching creations while also providing product details. Zillow plots homes on a map.

If it makes sense for your use case, and users don’t have to take multiple steps to switch views, you can also give them the option to toggle between formats. 

Make your search results accessible

Finally, you can make your mobile search results, and indeed your entire mobile UI — more accessible to all your users by meeting industry standards for accessibility.

Two ideas: 

  • Enable alt-text on the search icon. Then, allow users to browse the search results by using the keyboard
  • When a search result is found or not found, display a status message that can be picked up by a screen reader

The end result(s)

Effectively designing the search experience for your mobile app in a way that delights your roving users and makes them want to stick with it may have some daunting moments, but persevering is worthwhile if you want a winning mobile experience. Remember, good mobile search design patterns enable your users to seamlessly find what they’re looking for. Well-designed search on a mobile device can improve not only the in-app user experience but your conversion, customer loyalty, and profit margins.

That sums up our series on mobile search UX design — hope you’ve found this design inspiration insightful!

Now that you know all the secrets of mobile app design, are you ready to provide a satisfying experience that brings people back to your app time and time again? One option: Algolia can bring our advanced search functionality expertise to your mobile-app designers’ table. If you’re interested in learning the details, just let us know. We look forward to hearing from you.

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 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