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

Welcome to our three-part series on creating winning search UX design for your mobile app! This post identifies developer constraints with mobile UIs, part 2 looks at ways to fine-tune the usability of your search app design, and the last segment focuses on how to present a search-query-results page that gets, well, the desired results.

Mobile: the emerging gold standard

The mobile user experience — UX for short — encompasses the beginning-to-end journey and interaction flow when someone uses an app (or a mobile web browser) on a handheld or wearable device.

In our connected world, many people, who are typically on the go with their portable mobile devices in tow, want to access the Internet from those devices. In fact, as of 2023, mobile users accounted for about 50% of global web traffic.

That means your mobile app design patterns are a pretty big deal. And perhaps even more importantly, the design of your search functionality for that app is easily the most critical element of the design.

Search: an app with a mission

Without search, it would be close to impossible for users to interact with the content they want to see, and to subsequently buy your products or use your services. As with a search user interface on a desktop computer, mobile search is very often the genesis of someone’s online experience. Mobile apps retrieve all kinds of information, and search — sending a query to a database and receiving results ranked by closeness to the query term — is at the center of that process. 

Well designed mobile search for ecommerce apps and other uses gives users quick access to all available content and enables their success as online consumers. Executed poorly, a mobile search experience can figuratively cripple prospective customers in their paths, strike down subscribers in their quests, and permanently drive them away, leaving them with a bad feeling about your brand.

If these facts about mobile search have gotten your attention, and you’re thinking about whether your own mobile-app search feature is doing all it can for your business, keep reading. With the right guidance, you can help your users find what they need, plus keep them engaged for longer and reliably build their trust and loyalty.

Ready to explore mobile-design best practices for search? We’ll start by considering the challenges that are inherent with mobile. Next, we’ll look at concrete, proven ways to build mobile-optimized search. And finally, you’ll learn about the most optimal ways to present your search results to your users. 

Roadblocks to great mobile search

Developing a great user experience for your mobile app is a challenge in and of itself. Add search UI elements to the equation and things get even trickier. While implementing search on mobile is a demanding task, the good news is that it’s not impossible.

The first step is becoming aware of potential problems. Here are some key things to scope out when designing a mobile search UI/UX.

Downsizing isn’t optional

When creating apps for mobile platforms, much of the challenge stems from the extreme display-space limitations. A common rookie developer mistake is trying to display all of the same data in an app that can fit in the spacious real estate of the desktop version. That’s akin to attempting to stuff the furniture and accumulated miscellanea from a three-bedroom home into a studio apartment; it’s simply not going to work.

Plus, with search, the simplistic adage that “Less is more” may not apply. Limiting information can pose serious challenges for the search use case if a key detail is inadvertently edited out. But tiny mobile screens require just that: editing content out. That means, among other things, that search results must be pared down to only items that are the most relevant to the user, and those anointed nuggets must be honed for conciseness.

One size doesn’t fit all

On a mini screen, there’s also the question of where to squeeze in any search filters and facets, which can quickly refine a user’s search. On a desktop screen, there’s plenty of room along the left margin, or at the top of the screen, but with teeny screens, each little spot is a hot commodity that must be figuratively “auctioned off” for the highest good. Mobile designers must scrutinize every aspect of the user journey and apply the best use cases for the particular app.

Needing to condense so drastically also puts pressure on expectations for the relevance of each included search result: if you show only five results, you can’t afford a single irrelevant one.

It’s not an exaggeration to say that the number of returned items on the screen and the details they include determine whether someone drowns in an information swamp or enjoys a pleasant, fruitful ride across the surface. That means app developers must master both how to condense search features and how to expediently display mobile search results. 

Mobile users are multitasking

We often use mobile phones in away-from-home and hectic environments — on public transit, in a crowded coffee house, while driving (despite admonitions to turn off phones behind the wheel), while walking (when we should be looking out for that fountain). These environments are not generally conducive to conducting a search online. That means app functionality must go the extra mile to make the digital search process easy and help users quickly find what they need.

Every tap tests people’s patience

When transferring a query from your brain to a search engine, the most common input method is still the keyboard.

On a desktop keyboard, most people can rely on their fingers for that. All bets are off, though, with a tiny mobile-device keyboard.

The tapping-in process on a mobile device is daunting (and gets worse with age). It’s harder to see what you’re doing, easier to hit the wrong key, more time-consuming; more downright irritating.

And that’s with a well-designed advanced search interface. If users get annoyed by the limitations of a poorly designed interface itself, as opposed to something they can control, like how fast they can hunt and peck, they may throw up their fingers and go elsewhere. So to succeed at designing mobile search, it pays to make every tap worth your users’ while. 

Searching isn’t simple

Apps are typically optimized to provide the most frictionless user experience, minimizing the amount of input. When you’re consuming content in a semi-passive way on a mobile device — tapping a title, scrolling, reading an article, swiping through photos — it’s relatively painless.

Search is a different animal because a number of steps are typically needed with every quest to guide users:

  1. Locating the search box or search icon (e.g., a magnifying glass icon)
  2. Thinking about how to phrase the query
  3. Entering the query in the search bar
  4. Using filtering options and facets to specify what’s desired
  5. Reading any feedback from the search engine, such as a question about incorrect spelling
  6. Browsing the search results
  7. Clicking promising results
  8. Reading product detail pages
  9. If the search results are insufficient, repeating the process

There’s no way to truncate the search process, but developers have a variety of ways to make each step as easy as possible.

Searchers are likely Googlers and Amazonians

Thanks to being dazzled by the AI-aided search functionality of Google and Amazon, consumers have perhaps unrealistic expectations for how it will or should also work in any mobile app (and on any website). We expect intuitive suggestions from our first keystrokes and intelligent search results pages in an instant. If an ecommerce mobile app fails at searching, a user may very well resort to doing a Google or an Amazon search for the information. 

To provide A-rated search, developers must meet or exceed the collective expectations built up by these leaders.

Typos shake things up

Nobody likes typos, whether they’re the user, the search engine, or a business that’s losing customers because of them. However, from a mobile user experience standpoint, you have an extremely high probability of frustrating people who inevitably hit a wrong letter. The mobile application developer solution? Forgive users their in-app typing transgressions by supplying them with handy typo-tolerant search.

Mobile networks go up and down

People generally expect their Apple iPhones or Android phones to work as well from the top of a mountain where they’re hiking as at home while they’re geeking on their phone. That’s not always realistic, even in a bustling city. However, connectivity insecurity adds pressure to the mobile dev experience. Developers need to keep in mind that network issues could interrupt search app users’ quickly getting their search terms in real time by dumping them offline and plan how the mobile UX responds in that situation (e.g., with a progress bar that also acknowledges or thanks them for being patient with the inconvenience).

Effective UI design is in your reach

Congratulations! You’re now aware of some significant ways that designing search for mobile apps could go awry. But don’t stop there: check out our design inspiration–oriented part 2, featuring good examples of how to steer around those looming interface design potholes, optimize your UX, and come out way ahead with your mobile search users.

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

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

Vincent Caruana

Sr. SEO Web Digital Marketing Manager