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

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

Senior Digital Marketing Manager, SEO

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