Search In Mobile User Interfaces: 42 Search Bar Design Examples

Are you currently designing an app and you reached the point of creating the search bar design? I know. You need to see search box designs created by others.

Mobile interface designers are among our faced-paced web space’s favorite artists, as the ones in charge of optimizing our mobile browsing experience.

While it is not that much of a challenge for a site developer to optimize pages for mobile use, there are those who lighten the burden with fully-featured mobile applications.

Mobile user interface (UI) is a term that refers to preparing graphical and touch-sensitive content for mobile devices with different functions and interaction features. Unlike traditional desktop web design, mobile interface design requires adjusting content to small and touch-sensitive screens, and creating special readability, usability, and consistency control.

This often means using multiple symbols and hidden controls, and resizing all elements to make enough space for clutter-free texts and images. A critical part of the job is designing search UI patterns and accounting for different search filtering considerations.

To learn more on search UI design or get some app design inspiration, check our list of app UI tips & tricks.

Search app design best practices

Explicit search bar design

In terms of app UI design, explicit search means enabling users to perform explicit search actions and get results listed immediately. Depending on the designer’s idea, this can be enabled with search fields and buttons, or by pushing a button on the keyboard.

In both cases, results are listed right under the search bar. A good search interface design practice is to combine such explicit patterns with auto-complete ones.

Auto complete search

Web 2.0’s best known search pattern is auto-complete, where results are displayed while you’re typing in the desired term. All you have to do next is to select a field and your search will be completed. In case you wish to search by different criteria, a paired explicit search pattern will get the job done.

When executed properly, auto-complete searching displays results right away, but you can also enhance it with a progress indicator that provides users some feedback. A search indicator like this is used by Netflix, while Fidelity only provides one once the results are displayed.

Another owner of a fast auto-complete search function is TripAdvisor that supplies you instantly with information on hotels, restaurants, bars, and popular traveling destinations. LinkedIn comes quite close to it by listing direct connections first and only then suggesting other people.

Dynamic search bar designs

Another really popular search interface design pattern is dynamic filtering, where you enter text in the searching field on key press, and all data is filtered on the screen. In many occasions, dynamic searching patterns remind of auto-complete ones, but they have a whole different integration model.

They also serve two distinct purposes, as dynamic patterns whittle and refine a list of objects that is already there.

Scoped search interface design

What many designers perceive as the fastest and easiest search pattern is scoped search, as these fields produce results before the search is completed. An option like this in put in place by Photobucket and Google, which use two completely different design, but with the same purpose.

Recent and saved searches

The usability concept of successful mobile app interfaces is quite simple: You have to show users that you respect the effort they made. The best way to do that is to keep track of their previous searches, and give them the chance to refer to one instead of repeating the process and typing in the same keywords.

Search forms

Some designers prefer to give users the chance to browse a database based on several criteria at once, again clicking on a single button to complete the search.

Mobile search results

As soon as the searching process is completed, designers have two choices: to display results on-screen, or provide a dedicated page/window for the purpose. You can get pretty creative here, and showcase results in lists, tables, maps, or even thumbnail images. This will all depend on the preferences of your users.

A popular technique is the so-called ‘lazy loading’, where the app displays leading results while more of them are loading. In some cases they load and appear automatically, while in others it is the user that has to click on ‘View More’ to get them (social networks, for instance).

Searching within a mobile app must feel like a proper conversation

The main reason why search UI design is so important is that it enables interaction between your content and your users, and helps them discover more about what you do.

Successful search filtering, however, is nowhere close to an easy task, and the designer must understand in detail what users are going to look for, and how they’d prefer to find it. He should try and answer the following questions:

How will they be searching?
What will they search for?
What will the queries look like?

In order to get the right answers, the designer should create a search interface design that resembles a two-way conversation. Basically, he should be in full control of what users need, and whether they’re able to find it.

To understand the basics of search UI design, you can divide it in three different components:

Entering a query
No match found/ No results available
Displaying results

Let’s check them out

Entering a query

In order to find results, users should have a type of search bar to type their query in. The app will then automatically match the query with the information in your database, and select the best results.

To do so, the app interface should be brought to perfection, as in all other cases it may produce irrelevant results or make the list too difficult to navigate.

This, however, is not a reason to be afraid of experiments – you can always develop your own app design best practices, and think of unique ways to meet your users’ desires.

A searching option that is easy to discover

There are apps where user engagement depends heavily on searching for results, in which case it is particularly important to make search interaction visible and findable. You can do this by embedding an always-visible and persistent search bar on the screen, or using a magnifying glass icon placed on the navigation bar to save some space.

Hint placeholders

Despite of generic placeholders being the safest option for a searching bar, you can always go a bit out of the box and describe in detail how the box ought to be used.

If the search function is limited in anyhow, make sure the user knows about it, and doesn’t go beyond what the bar has to offer.

Making suggestions through your mobile search design

A common and very serious mistake some designers do is keeping the search bar blank until someone actually taps on it, as this can either confuse the user, or waste precious real estate on the already limited screen.

Besides, there is nothing personal about an empty search bar – you’ll be missing your chance to guide the user through the process, and to be appreciated for curated content and interesting suggestions (related results, popular searches, top rated, favorite, and more).

Suggestions have multiple advantages, and one of them is the possibility to keep a user engaged even if you can’t offer what he is looking for. Didn’t it happen to you to open predefined content and simply forget what you came for?

Searching within tabs and categories

There are search UI patterns that make it possible to navigate only through groups and categories of content, even if they’re not that easy to find.

Yet, those who made the effort to design them are recording significant success, as they have what each user dreams of. Dedicated searching is also a smart strategy to avoid errors, because whatever the user is looking for, he will find it.

Search history

Users of today expect nothing less than an app that takes them back to their previous session, as they’ll very likely search for a similar thing. Put yourself in a user’s position – wouldn’t it be frustrating to search over again just because a notification interrupted your session?

With a search history section included, users will appreciate the professionalism of your service, and feel encouraged to explore your database. There are two ways to execute such a pattern – to store searching terms as they’re inserted, or to let the app do that proactively and independently.

Constrained searching

If offering specific content, you should limit searching possibilities, and narrow the list down to only few suitable parameters. This will give you a clear app that ‘knows’ that users want, and provides them with specific results that match their needs and expectations. Needless to say, search parameters like these are also easier to prepare.

No results available

Let’s devote some time to how you’re going to display results. Or how you’re not!

Again, you shouldn’t deviate from the basics of the usability principle, namely making it possible for users to diagnose errors, recognize information, and solve their problem. As the one behind the wheel it will be your responsibility to prepare for worst-case scenario.

A way to do this is to prepare a no results page, and use other mechanisms instead that could keep users interested. Here are some tips and suggestions:

Let the user know what the problem is. If something went wrong, be clear about it.

Suggest related terms and misspelling suggestions. The reason why most users reach the no-result page are misspellings and errors, which is why you should think of a mechanism that will detect those.

Don’t make searching too specific. Users may also reach a dead end looking for overly specific information, so make sure you’ve removed or transformed queries into keywords that can match with them. For instance, when a user is browsing in a particular category, you can only display results from that category.

Fallback content. Popular/related posts and curated content can cover in cases you’ve tried and failed with all other mechanisms.

Let users login upon need. In case some of your category require users to log in/ sign up, give them an opportunity to do that right away.

Displaying search results on mobile user interfaces

What happens when the user’s search produces results? The worst thing to do here is to bundle all sorts of related data on the same page, and expect the user to find his way around it.

Here are some tips to consider:

Don’t forget the default sort: once generated, results should also be arranged in a logical manner, and the user should be able to depict instantly the piece of content he wants. Ideally, you should give the user a chance to prioritize and save results, or follow an intuitive pattern such as alphabetical order or filtering by prices and days. This, of course, depends on the nature of your business.

Categorize the results: Don’t miss the chance to keep posts in order by sorting them out in different categories, following the example of the apparel industry, for instance. This is a very simple procedure, as all you need to do is to arrange search results in headers.

Let the user choose the view options: There are many different modes in which you can display different results, as thumbnails or carousels, for instance, but priority should always be given to the users’ preferences. You should let the user decide on the view mode depending on his search’s context, and enable a procedure that doesn’t require too many steps to get the job done.

Replace pagination with infinite scrolling: As you’ve noticed lately, not that many apps display results on paginated screens. Instead, they favor infinite scrolling over the results page, packed with a lazy search pattern that loads additional results. To improve user experience even more, you can include a show-more button, and let the user choose how many results he wants to see displayed.

Inform the user on the number of results: Once you’ve categorized results, it will be easier to depict the exact number of queries for each, and give the user at least a brief idea of what to expect.

Highlight the keywords: Without this, it will be difficult for users to understand what they’re looking at.

3 common search UI patterns you should consider

With more and more apps specializing in their niche, an attempting to introduce a unique search paradigm, you’re no longer obliged to follow a ‘pure’ searching pattern, or adhere to any rules. What will matter more is pre- and post-filtering, and whether your search mechanism actually meets the goal it was created for.

Basically, you should know from the very beginning how users are going to interact with the search pattern, and what you could do to make the narrowing process a bit easier for them. Mobile design makes this even more imperative, given that there should be less text-entry interactions, and more swiping gestures.

Nevertheless, it is a good idea to check the work of popular designer, and see which filtering options you have at your disposal. Here are three good examples:

Here are 3 common best design patterns you can use for showing filtering options:

Filter panels and overlays

Filter panels and overlays are additional tools you can include on the result page, usually embedded on the side panel or within a modal overlay. This gives the user a chance to search for more specific results without having to repeat the process.

Full-screen filters

Another type of filters that can help is whole-screen filters which appear prior to results being brought up, and the user has to either use them or dismiss them. They’re not always the best idea for mobile screens, and may take the user out of the context of his search. These filters take up the whole screen of the results, and the user must dismiss them to see the results.

Filter forms

Such filters are used for apps that ought to display a large number of results, and are generally perceived as the most advanced filtering solution.

Top search filtering practices

To master the skill of creating functional filtering options, follow these tips:

Stick to the filters that matter

A phone’s screen is already limiting the estate you have to work on, so use only those filters that will genuinely makes a difference for your users. If you think your app needs no filters, don’t include them.

Put important filters first

With many content filters to include, emphasize on those that matter the most. Base this decision on your own option, but also users’ feedback on what they’d like to know about your products. You can even promote several filters at once by putting them in a different location (ideally, on top of other filters), or using a different color for them.

Keep less important filters out of sight

Filters you believe won’t be a user’s first priority should be kept out of sight, but still in a place where the user would be able to expand them. He/she will appreciate the possibility to engage with them upon need, and scan for curation ideas in future.

Embed filters that are easy to change

It may happen that a user selects a filter from your list, but decides to change it once results are displayed. Therefore, important filters should be on screen all the time, giving users the freedom to change their search criteria.

Another good idea is to place all filters on wider screen bar, and make it possible to switch them off with a single tap.

Limit the number of searching option

Does it really matter to enable filtering price ranges between $10 and $20? Such nuances will only clutter your app interface, so save some real estate for more important details.

Consider suitable UI controls

The UI controls you need will depend on the type of filters you’re using. For some of them, you will only need users to check/uncheck a box, for others to define a range or a quantity, and sometimes even to build their own list of affordances. In such case, you should have multiple controls that match and replicate a real-time purchase experience.

Searching or filtering: Most important guidelines

Search and filtering are actually very interchangeable, as search sometimes depends on filtering, and filtering depends on it as well.

This is the struggle of improving users’ experience – you have no strict rules that tell you how to do it, but rather a batch of general tips and ideas you should tweak to your needs.

Practices that apply to every app: With some tips and ideas, the nature of your app won’t really matter. This involves some basic and obvious controls, such as preparing a no-result page and offering additional suggestions.
A good understanding of what you have to offer: It won’t hurt to familiarize with your inventory in details, so that you know which features users are most likely to look for. Basically, you should build a search pattern that can help them.
A good understanding of who your users are: When testing filters and nuancing interactions, you should always consult real and non-biased users. With direct input, you will have the picture of how most users will behave with your app, and what can be done to solve their issues. On average, it takes the opinion of 5 different people to become aware of even 80% of your problems.
A defined purpose: Just because search filters are so popular it doesn’t mean that you should also use one. With mobile screens being as limited as they are, you should give priority to elements that really deserve to be there.

Search UI examples

The mobile environment is growing and everybody is trying to improve the elements that are present in apps and create the mobile user experience. When going from desktop to mobile design, you have to realize that things are completely different.

Moving from a big screen to a small one means that a lot of white space is gone and you have to think really minimalist in order to get everything useful inside the viewing area.

The instant rise in popularity for this environment causes a hype that intrigues a lot of designers to create apps for Android or iOS without much thinking and that leads to a lot of fails. There’s no hidden truth that most mobile apps end up failing and no surprise considering how some designers view their projects.

Instead of hurrying into a project and designing everything really quick, a designer should take his time to analyze the market, look for mobile user interface inspiration and observe how others are doing certain elements of the app design.

One of these elements that I’ll showcase today is the search form for mobile apps, which I hope will help you design better mobile apps and succeed in creating well designed and successful apps.

Search To Back Arrow

Search Bar Animation

N-calendar app concept

Craiglist Mobile animation

Mail App [Inbox+Search]

Home & Side Menu Screen

iOS App Filter

iOS Search Experience

DateNight – iOS App WIP

TailsLife: Advanced Search

Linkedin Mobile App Redesign

Food & Drink Menu

Counsellors – Feed & Chat

Search

Search Results

Mobile apps search transition

Schedule App #2

Search Doctor Mobile app design

People + story screen

Responsive Search

Fashion Inspiration Android App

Search – exploring new styles

Top+search

FAQ about search in mobile UI

How to improve mobile search usability?

Man, you know what? A good way to boost search usability is to put that search bar right at the top of the screen, where it’s easy to find. Plus, it’s a great idea to use autosuggest to help users find what they’re looking for quicker. Oh, and don’t forget to make the search bar and text big enough to read and tap, ’cause nobody likes to squint or fumble around with tiny buttons.

Does the search icon’s placement matter?

Totally! The search icon’s gotta be in a place that’s super easy to find, like in the top right or left corner. If it’s buried somewhere in the menu or just plain hard to spot, it’s gonna frustrate people. So, keep it visible and accessible, and everyone will be happy.

Do I need filters for my mobile search?

You bet! Filters help users narrow down their search results, making it way easier to find what they’re after. Just remember to keep ’em simple, and don’t go overboard with too many options.

Voice search vs. text search: which is better?

Honestly, it’s all about personal preference. Some folks love using voice search ’cause it’s hands-free and quick, while others prefer typing it out. So, why not offer both options? That way, everyone gets their pick.

How important is search speed on mobile devices?

Search speed is super important, no doubt. Users don’t wanna wait forever to get results, especially when they’re on the go. So, optimizing your search speed can make a huge difference in user satisfaction.

What’s the best way to display search results?

Keep it clean and simple! Show the most relevant info first, and try not to clutter the screen with too much stuff. A nice, easy-to-read layout with a good balance of text and images is the way to go.

How to handle no search results found?

Don’t leave users hanging! If there are no search results, offer some suggestions or alternative queries. You could also show popular or trending searches to help guide them.

Should I use infinite scrolling or pagination?

Infinite scrolling works great for some sites, but pagination can be better for others. It all depends on your content and what your users prefer. Test both options and see which one works best for your mobile UI.

How to optimize search for different screen sizes?

Responsive design is key, my friend. Make sure your search elements adapt well to various screen sizes, and don’t forget to test on different devices. That way, users will have a seamless experience no matter what they’re using.

Are visual search features worth implementing?

Visual search can be pretty cool, especially for things like shopping or image-based content. But, it’s not a must-have for every mobile UI. If it makes sense for your site and users, go for it! Just make sure it’s well-integrated and user-friendly.

Ending thoughts on mobile user interface search forms

Search interface design is slowly becoming the make it or break it trend in app design, and plays a decisive role on what users will read, buy, like, or where they will go. It simply shapes our knowledge and beliefs, and imposes a responsibility on designers to explore different patterns and solutions that match the specification of their industry.

Thus, search UI design matters to eCommerce, web, enterprise, social, mobile, and real-time discovery, and the more relevant and appeling it becomes, the more users are relying on it. In short, searching is reinventing the way users interact with content, and what they perceive as relevant to them.

From the designer’s perspective, this means paying more attention to faceted navigation, display and visualization, by-sensor search, multi-touch, and augmented reality.

In order to improve users’ experience, designers rely mostly on how define their users’ expectations, but also research for clues and evidence to make the search pattern more effective. Their biggest challenge may as well be to get the user involved, and transform what seems a pretty streamlined operation into a memorable experience.

If you liked this article about search in mobile user interfaces, you should check out these as well:

Author
Recent Posts

Bogdan Sandu

Bogdan Sandu, a seasoned designer with 15 years of diverse experience, has been designing websites since 2008.

Renowned for his expertise in logo design and visual branding, Bogdan has developed a multitude of logos for various clients.

His skills extend to creating posters, vector illustrations, business cards, and brochures. Additionally, Bogdan's UI kits were featured on marketplaces like Visual Hierarchy and UI8.