PART 1/2

The ultimate guide to search UX

Image for post

LLike it or not, a Search UX is an integral part of any app UX these days. You might think that designing for a search experience is so easy — put a magnifier or a search bar on top of an app home page and be done with the job. But what to show during the search? How to help the user find what they want as fast as possible? How is a search UX connected to other UX? That is where a lot of people get fuzzy.

In this article, I will cover everything you need to know about an End-to-End Search UX. This includes how to design for before search, during search and after search experience across different apps and use cases. Hopefully you will know exactly what to design for a search UX after reading this.

This article is a 2 part series where the Part 1 covers how to design for before search and a search page, where Part 2 covers during search (continued) and after search UX.


1. Before You Search

Search is such an indispensable part of an app, that you can almost spot how to search immediately when you go into any apps. Therefore, how to present search as an easy portal is important.

Image for post

3 use cases for search

There are 3 common ways to present search to a user — search as a top bar, search as an icon (magnifier), or search as a tab in bottom navigation. Obviously, the visual (and feature) magnitude is search as an icon < search bar < search as a bottom navigation tab. So what are the pros and cons of each option, and when to use what?


(1) A Search Bar

A Search bar (and in most cases, works as a top bar) is usually at the top of an app homepage, and it is a common design for the user to spot search as a portal. It is a big touch target on top and spottable when the user is right on the homepage.

Usually, a container, the placeholder text (with or without a magnifier), and action buttons makes a search bar.

Image for post

Search Bar Breakdown

Container

Rule of Thumb: Contrasting the container with the background of that page.

A Container usually has a white or grey background to bring out the placeholder text. But when to use a white container, and when to use a light grey one? It depends on the background of the app homepage. The rule of thumb here — is to always contrasting the container with the background of that page. Take Google Map and WeChat Reads for examples — a white search bar comes in a light grey (or other colored) background, and vice versa.

Image for post

Search Bar as a Top Bar

There are exceptions, however, like in the case of Airbnb having a white search bar on top of a white background. However, in this case the search bar has a stronger shadow than other search bars, going back to our rule of thumb — contrast.

Image for post

Contrasting the search bar to the background

Placeholder Text

Placeholder text bears the weight of hinting the user what they want to search or where they are searching it from. A placeholder text can be as simple as “Search” or “Search Something Here”, when an app does not have to point the user to a certain direction. However, when it does, a useful placeholder should tell you exactly you can get from the search. Like in the case of IOS App Store, the placeholder tells you that you can search for “Games, Apps, Stories and More” whereas Messenger’s placeholder can be just “Search”.

Image for post

Placeholder examples

A third use case for a placeholder is common in content browsing apps — that it not only hints you categories of contents they have, but actively promotes some contents by showing what’s trending and/or changing the promoted content once in a while. Take WeChat Reads for example — it uses a trending book name as a placeholder and changes its content every-time the user reenters this page.

Image for post

Trending Contents as Placeholder

Action Buttons

When a search bar is used as a top bar, it will be accompanied by the action items that would normally goes on an app top bar. See my previous article to find out what icon/text buttons will go on an app top bar. What I want to emphasize here is what goes in the search bar versus what goes outside of it — although there isn’t any strict rule stipulating this, I did uncover some common patterns that makes a lot of sense to me.

The bottom line is:

Although actions that’s related to search doesn’t necessarily goes into a search bar, what goes into a search bar should be related to search.

What icon/text links can help with search? The most common ones are QR code that the app generates for their users and products (so that the user can find each other or things they want) and voice recording/recognition functionality for design accessibility. See in the examples of Google Map (using voice recognition as a second way of search input) and Linkedin(using the QR code to add people as connections).

Image for post

Action items on a search bar

Of course, if a search bar replaces a top bar, then not all actions on top will be related to search. The key for designing a good UX here, then, is to visually distinguish the search-related icons and the rest. In the example of Google Map, it uses a simple divider, whereas on Linkedin, the search-related QR code is placed inside of a search bar and profile/messaging icon are placed outside.


(2) Search As an Icon

If an app wants the user to focus browsing the content, or the use cases of searching is simple and infrequent, we can put search as a magnifier on top. For example, users on Medium usually are browsing the content aimlessly rather than search for a specific topic, or users on Facebook usually just want to browse their friends posts.

Image for post

Search as a magnifier

(3) Search As a Tab in Bottom Navigation

Regardless of its use cases, search as a tab (or destination) in an app’s bottom navigation provides a closer touch target for the user. Hence, search as a tab is given a lot of weights as a feature. When does an app give search so much weight as a feature? There are a few common use cases.

One of them is that the app wants to sever the content browsing and search experience — so that the user can get constantly stimulated by the new content instead of keep coming back to things they are familiar with. Take UberEats for example — they put sort & filter on the homepage to help the user sort out restaurants that they might be interested in, and only put search as the second tab in bottom navigation — that is the only way that the user can keep seeing and exploring new restaurants.

Image for post

Search as a tab in bottom nav

Tiktok also have a similar use case, where they aim to create an immersive experience for the user (when they are browsing vidoes) and of course, search is not going to help in this case.

Image for post

It’s a whole another story, when the magnifier tab is named “Explore” instead of “Search”. In this case, search is still an integral part of this tab, but this tab also aims to help people browse content and navigate them to a specific genre/section of contents that they like. In this case, a “explore” tab kind of behaves like a homepage with a search top bar.

Image for post

Search tab that serves both for search and exploration

2. A Search Page

Say a user wants to search something, spotted the search bar and clicks on it, now what? How should an app help with the user’s search?

That is why an app usually have a page that pops up when the user clicks on the search bar BEFORE THEY TYPE ANYTHING that I’m hereby defining it as a “Search Page”. It aims to get the user ready to search, remind them of things they might be looking for, and broaden their views on what they want to search. This is the app’s way to tell the user — I’m ready to help you get you exactly what you want.

Image for post

Google Map Before Search vs. Search Page

How does an app do a good job in a search page? Do explain that, we need to explain how does the page achieve two major tasks:

  1. Tell the user that I’m ready for your search through visuals and interaction.
  2. Remind the user things they might be looking for or giving them things they might be interested in through content on that page.

(1) Visuals & Interaction — Telling You That I’m Ready

To answer the question how might an app tells the user that it’s ready for his/her search, we might first ask the question — is the search page a new page?

Answer: Yes, but it shouldn’t feel like it.

Why is that? Because your eyes are on the search bar (or a search magnifier) when you have a specific search quest in mind, and you will probably have a fragmented experience if you were suddenly directed to a new page. That’s why it is important to:

Make the transition from “Before Search” to a “Search Page” natural and unnoticeable, as if the user is still on that same page.

What that said, how does this work in action?

If we have a magnifier to start with, then it will expands to a search bar through smooth animation, just like the case of Facebook:

Image for post

Image for post

Facebook magnifier turns into a search bar

If we have a search bar, either on the top or being one of the app navigation tab, it’s really important to show the different states of a search bar to tell the user that “I’m ready for your search”. There are a few ways to do that, and there may/may not work together.

Take Linkedin as an example, a few things happened from before search to a search page:

Image for post

Linkedin’s before and search page
  1. A way to go back from search: cancel. This is required for almost all the search experience, either cancel or a “go back” arrow button.
  2. The search bar changed background color to reflect focus state — from grey to white in this case.
  3. Immediately eliminated the non-search essential icons and leave only the necessary ones, in this case, the QR code stays to aid with search, and the personal profile goes away.
  4. Maybe a popping cursor to encourage text entry.

One thing to mention is that in some apps, the search bar may not be in the same position on the “before search” and “search page”, either purposefully being used to make a smooth (but more conscious) transition between the two experiences, or because of some spacial limitations. For example, Doordash and Google is making the search bar sliding up and replacing other contents to make a smooth transition animation.

Image for post

Image for post

The point being — these apps are going make every effort to make the transition as smooth as possible, so that eventually you still feel like you are on the same page.

There are some search UX, however, impossible to let the user stay on the same page. Take Airbnb for example — their search is actually a series of guided selections the user has to make before they get targeted results. That’s why they move the user to a full-screen flow with a few steps — which has to look different than the original “before search” page. But the point stands — the search UI pops up in the middle of the screen, followed by a keyboard sliding up, you get a very smooth transition from “before search” to during through seamless interactions.

Image for post

Airbnb’s search UX

(2) Content — Reminding You What You Want

Now that the user is fully aware that the app is ready to help them search, but help them how? That comes down to the contents displayed on that page. There are two directions that the contents can go — something the user has searched before, and something that they never think of searching.

Users like relevancy to themselves. Displaying search history can help the user with targeted search because past interests is a strong indicator of present interests. However, only showing the search history can narrow down the user’s focus to the past searches instead of keeping them up to date. That is why displaying recommendations can broaden their views on things they are potentially interested in. It also helps with the customer stickiness if the user has been successfully intrigued by the promoted contents. Now, how to decide what to show on your app’s search page? I’m going to help you find out step by step.


Use Case 1: “There is nothing to recommend”

When an app is used like a tool or share single responsibility, which means it is mainly used for the user to complete a specific task or reach a certain goal, then it might not have the incentive to promote anything or simply have no contents to promote. Of course, such apps are only going to display recent searches. Take Notion, a note-application for example, it has the single responsibility of storing the user’s notes and therefore is only displaying past searches to aid in the user’s search in their notes.

Image for post

Notion only display recent searches

Use Case 2: “I already promoted exploration contents somewhere else”

On the other hand, not all tool-like apps are like this. There are a lot of apps that are achieving a certain goal for the user, but benefit from getting their various kinds of contents out there for the user to see and explore. Take Google Map for example, it strives to help the user to find the place they want to go, but also wants to encourage the user to strengthen their ties with all kinds of coffee shops, malls and parks in the neighborhood while it itself benefiting from this as well. That is why a Tool app like Google Map also needs to get its content out there — the problem is when.

Maybe that is why that Google Map chooses to have the popular searches/categories ahead of search — so that when the user gets their eyes on the search bar, chances are they might find their interested categories in one of those tabs. In these days, of course the first tabs are Takeout and Delivery 😂. But once the user clicks on the search bar, Google will assume the user have a specific place to go and in turn only focus on helping them get to wherever they want, stat.

Image for post

Google is promoting popular categories before search but not during

Use Case 3: “I need to balance the recommendations and search history when the user search”

Needless to say, the more contents an app can get the user interested in, the more the app would benefit and profit. There are numerous of reasons that an app wants to make recommendations to the user when they search, and especially when they search. By having the user to a search page, an app successfully win all the user’s attention to this page. Recommendations on a homepage might be easily missed (as it might not be relevant to what the user is doing), but popular categories on the search specific page can rarely go unnoticed. In a way, this is the app’s best timing to promote contents — it’s not like the user can go anywhere else if they do want to make a search.

Top Categories

There are a few ways for an app to get the user intrigued by something they didn’t before, and it can be as simple as displaying top categories of contents. Simply by putting the big categories of cuisines out on top of displaying user’s recent search, food delivery apps like UberEats and Doordash can point the user to what they might be in mood for at that moment — and maybe not only limit themselves to the restaurants they tried before. The more restaurants the user have tried on this app, the more sticky they are.

Image for post

Showing top categories of cuisines

Popular Topics

Showing popular contents creates a sense of community for the user, and therefore invites them to be invested on the contents of this app — everybody else is interested in it, why not you? Clicking on popular contents makes the user feel that they stay relevant to the larger society. Quora, a big question/answer platform not only shows recommended spaces, but also shows it with the number of followers. Seeing that, the user would think to themselves “if a space has 130k followers then it must be good!” and clicks on “save” even before they realize it — now they feels good about being a part of it all — 130k+1 followers.

Image for post

Shows recommended spaces with number of followers

Trending News

On the other hand, trending news utilizes a even more powerful psychological trick — fear of missing out. This is because trending searches are usually time-sensitive, and the user is well aware that tomorrow’s contents will be different than today’s. This is not referring to the evergreen “recommended topics” like “Design” on Medium, but popular yet fleeting contents that change by the day. That is why some apps will have today’s news or top search rankings that shows something different, sometimes everyday, and maybe even more aggressively, every time when the user goes back to searching something. Reddit shows what is trending today to get the user up to date on contents, and Robinhood update WallStreet articles every hour about the stock market so that the user can make timely and informed financial choices.

Image for post

Reddit & Robinhood’s trending recommendations

Suggested For You

If all of the above recommendations is about making the user feel like a part of a bigger group, then “suggested for you” recommendations based on their past searches gives the user a personal touch, and performs as a gentle nudge for the user to step out their comfort zone, just by a little bit. Using machine learning, most apps can infer from the user’s past interests, and spoon-feed them contents that they most likely are interested in. This is almost toxic, when the user binge on kitten videos on Tiktok or home decor ideas on Pinterest for hours, before they even realize it. More kitten videos and pretty decor photos are just at their fingertips — how could they not?

Image for post

The same strategy can be applied on a search page as well. Red, a popular inspirational app, shows recommendations that are tailored to the user’s taste. Twitter’s first tab “For You” shows trending content based on the user’s past searches. Showing things more relevant to the user is a good way to make them feel more pertinent, and therefore, spend more time on your app.


Tabs for Categories of Contents

Out of all the contents that an app is showing on a search page, one pattern to point out is that when an app have contents that are of different categories, they usually use tabs to break them down so that the user can easily navigate to a subsection of contents. Take Linkedin for example, breaks the contents down to “People” “Jobs”… is a good way to prep the user for a more targeted and efficient search.

Image for post

Linkedin tab’s for searches

Balancing Search History and Recommendations… Or not

How to balance between depth (search history) and breath (recommendations)? It’s a million-dollar question that every app would ask. It’s almost intriguing, to figure out an app’s prioritization and inclinations by checking out how they present search history and recommendations. However, there is another way out.

Medium does this really clever, where they delicately breakdown the search specific page to be a two-step journey — tap the search bar once to explore different topics, and tap twice for the cursor to show and search history to surface. By breaking down this experience, they recommend exploration spaces with great subtlety and leaves the user with a cleaner experience when they search.

Image for post

Medium — tap once or twice