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