Search by Algolia
What is online retail merchandising? An introduction
e-commerce

What is online retail merchandising? An introduction

Done any shopping on an ecommerce website lately? If so, you know a smooth online shopper experience is not optional ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

5 considerations for Black Friday 2023 readiness
e-commerce

5 considerations for Black Friday 2023 readiness

It’s hard to imagine having to think about Black Friday less than 4 months out from the previous one ...

Piyush Patel

Chief Strategic Business Development Officer

How to increase your sales and ROI with optimized ecommerce merchandising
e-commerce

How to increase your sales and ROI with optimized ecommerce merchandising

What happens if an online shopper arrives on your ecommerce site and: Your navigation provides no obvious or helpful direction ...

Catherine Dee

Search and Discovery writer

Mobile search UX best practices, part 3: Optimizing display of search results
ux

Mobile search UX best practices, part 3: Optimizing display of search results

In part 1 of this blog-post series, we looked at app interface design obstacles in the mobile search experience ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

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

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

In part 1 of this series on mobile UX design, we talked about how designing a successful search user experience ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

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

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

Welcome to our three-part series on creating winning search UX design for your mobile app! This post identifies developer ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Teaching English with Zapier and Algolia
engineering

Teaching English with Zapier and Algolia

National No Code Day falls on March 11th in the United States to encourage more people to build things online ...

Alita Leite da Silva

How AI search enables ecommerce companies to boost revenue and cut costs
ai

How AI search enables ecommerce companies to boost revenue and cut costs

Consulting powerhouse McKinsey is bullish on AI. Their forecasting estimates that AI could add around 16 percent to global GDP ...

Michelle Adams

Chief Revenue Officer at Algolia

What is digital product merchandising?
e-commerce

What is digital product merchandising?

How do you sell a product when your customers can’t assess it in person: pick it up, feel what ...

Catherine Dee

Search and Discovery writer

Scaling marketplace search with AI
ai

Scaling marketplace search with AI

It is clear that for online businesses and especially for Marketplaces, content discovery can be especially challenging due to the ...

Bharat Guruprakash

Chief Product Officer

The changing face of digital merchandising
e-commerce

The changing face of digital merchandising

This 2-part feature dives into the transformational journey made by digital merchandising to drive positive ecommerce experiences. Part 1 ...

Reshma Iyer

Director of Product Marketing, Ecommerce

What’s a convolutional neural network and how is it used for image recognition in search?
ai

What’s a convolutional neural network and how is it used for image recognition in search?

A social media user is shown snapshots of people he may know based on face-recognition technology and asked if ...

Catherine Dee

Search and Discovery writer

What’s organizational knowledge and how can you make it accessible to the right people?
product

What’s organizational knowledge and how can you make it accessible to the right people?

How’s your company’s organizational knowledge holding up? In other words, if an employee were to leave, would they ...

Catherine Dee

Search and Discovery writer

Adding trending recommendations to your existing e-commerce store
engineering

Adding trending recommendations to your existing e-commerce store

Recommendations can make or break an online shopping experience. In a world full of endless choices and infinite scrolling, recommendations ...

Ashley Huynh

Ecommerce trends for 2023: Personalization
e-commerce

Ecommerce trends for 2023: Personalization

Algolia sponsored the 2023 Ecommerce Site Search Trends report which was produced and written by Coleman Parkes Research. The report ...

Piyush Patel

Chief Strategic Business Development Officer

10 ways to know it’s fake AI search
ai

10 ways to know it’s fake AI search

You think your search engine really is powered by AI? Well maybe it is… or maybe not.  Here’s a ...

Michelle Adams

Chief Revenue Officer at Algolia

Cosine similarity: what is it and how does it enable effective (and profitable) recommendations?
ai

Cosine similarity: what is it and how does it enable effective (and profitable) recommendations?

You looked at this scarf twice; need matching mittens? How about an expensive down vest? You watched this goofy flick ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What is cognitive search, and what could it mean for your business?
ai

What is cognitive search, and what could it mean for your business?

“I can’t find it.”  Sadly, this conclusion is often still part of the modern enterprise search experience. But ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Looking for something?

Mobile search UX best practices, part 3: Optimizing display of search results

Mar 14th 2023 ux

Mobile search UX best practices, part 3: Optimizing display of search results
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