8 mobile search design guidelines

Design Guidelines

8 mobile search design guidelines

Good mobile search should be fast, effective, simple, and never taken for granted.

Feb 18 ·5min read

Illustration by Ouch.pics

U sers spend a great amount of time on their mobile devices searching for solutions. Whether searching through Amazon for a new earpiece or Instagram for your friend’s profile, users are constantly using the search function as part of their mobile experience.

Good mobile search should be fast, effective, simple, and never taken for granted; especially if it’s a core function for the user to complete their objective — food delivery, e-commerce, or music apps.

The search bar, filtering options, and overall flow presents an excellent opportunity for increased user engagement. This article aims to explore the importance of the search function and how to design it based on the context of the query or nature of the app.

Use a full-length search bar

If you have enough space, it’s always better to display a full open-text field as using an icon-only search increases the cost of interaction; the user has to click on the icon, wait for it to expand, only then can they start typing.

A full-length mobile search bar is a great way to draw immediate attention, and give your users an obvious outlet to take quick actions. This is especially useful for apps that are driven by search, as it leaves no room for uncertainty.

Google Maps search bar is easily discoverable as it is displayed on the top of the landing screen.

Provide default searches

This basically means providing your users with default search queries that are relevant to them which reduces cognitive overload, making your app’s search experience substantially easier to use. The action of searching requires a certain degree of effort as the user not only has to come up with a query, but they also must type it. Typing has a high interaction cost as it’s prone to error and time-consuming.

Good defaults can reduce user effort; especially when users have to perform repetitive actions, or in situations when they need to use precision. For example, ride-hailing apps provide the user with a list of nearby locations when selecting their pickup point. This saves the user valuable time and increases the overall conversation rate.

Remember past searches

Past searches could be used as a form of “default search query” as it has the same benefits of reducing effort. This is particularly useful for ride-hailing, e-commerce, and food delivery apps where the user might normally search for the same thing repeatedly — remembering their past searches would help them pull up information more quickly.

ASOS search function saves your past searches so that you can easily perform repetitive searches.

Use auto-suggestions

Auto-suggestions is a good way to reduce data input and help the user get immediate search results. It’s best to display the auto-suggestion after the third character of any search query in order to minimize the number of keystrokes required by the user — providing immediate value.

It’s also a great way to help your users find what they’re searching for more quickly as auto-suggestions normally consider the user’s search term, trending searches, as well as past searches made by the user.

Airbnb helps its users find what they’re searching for by enabling auto-suggestions.

Simplify data input with technology

In this day and age, mobile devices are packed with all sorts of technologies and have amazing capabilities. Designers need to better understand those features in order to use them to stream the task of inputting data.

Voice

While voice technology is still evolving and is unlikely to be the primary mode of search for mobile devices, it can still play an important role in your search UX; especially for “hands-off’ apps like Google Maps or Waze. These apps are normally used when the user is driving hence voice search might be a good alternative for typing.

Camera

The advancement of image recognition technology has also made the camera another potential mode of search. This is typically used for e-commerce apps which allow the user to search by taking a photo of a product; showing similar products as the search result.

This is especially useful for fashion products which can be hard to describe; a “black dress” is too generic and might not express what the user really wants. By using an image, the user can show the app exactly what type of black she is looking for.

Organize your search results

Other than reducing the need for data input, it’s important to deliver the most accurate search results in a legible and organized manner in order to help your users identify the result they are looking for. To do this, you may want to categorize the search results based on their type to help users better differentiate them. You should also always prioritize the most relevant search results by them first.

Avoid showing no results

One of the key usability principles is to help the user recognize, diagnose, and recover from errors without much effort. By showing a “no results” or blank page, you are giving the user a dead-end in their experience; making them feel lost and frustrated. It would be better to provide or suggest alternative search inputs that they could make based on their search term.

Offer alternative view options

Search results can be displayed in different formats; list, grid, carousel, or on a map. As designers, we should consider the context of the search before deciding on how we should show the results — the list view might not always be the most optimal. It’s also good to offer the option for users to switch between formats so that they could decide what’s best for them.

At the end of the day, users are searching within your app to find an answer. That answer could be a black dress, a place to stay, dinner, or a friend but nonetheless, they expect the search process to be quick, smart, and frictionless.

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章