illustration of three people around a search window to introduce search design topic

Even search design can directly impact user experience in products

When it comes to the overall user experience of a website, software or app, search design is often considered behind other functionality. But the design of search can make a big difference in how users experience a digital product.

Not all websites or apps need search functionality, but there are many platforms where a convenient search is essential for a good user experience. While many websites can benefit from a search function, large websites with an extensive amount of content benefit the most.

According to this article about search versus navigation, search allows users to control their own actions and find things they are looking for. It’s not the same as navigation, which attempts to guide users to their destination. This means that if users resort to using your website’s search function, they are looking for immediate answers.

In this article, we will talk about how improving search design helps your user can find what they want as fast as possible.

Make search discoverable

Even before a user types a term into a search bar, it’s important to consider the user experience.

How does the user find search to begin with?

Search functionality should never be tucked away. Search design should always stay visible no matter what page the user visits.

Designers might consider minimizing space by using an icon to indicate search, Even in this case, users should be able to find it.

Now let’s say that your user successfully finds your search bar. You have multiple opportunities to improve the search function.

Support users before they start typing

Typical users are poor at query formulation.

What does this mean? It means they can’t always write the correct search phrase. And if they don’t receive good results on their first try, they might try again. But these attempts rarely succeed.

This is why we need to develop methods to help users hone in on their search – ideally before they even start typing.

Text says: providing user support before they start typing

Recent searches

Search design should make sure users can view their most recent searches as a best practice. It is simple yet effective, because it feels personalized for each user.

Seeing recent results may also remind them of things they might be looking for. It’s the site’s way to provide the user clues that it can help them get exactly what they want.

In addition, showing recent searches is an excellent example of one of the 10 usability heuristics: Recognition rather than recall. Users already have a lot on their minds. Rather than increasing their cognitive load, we can help them by showing them information they recognize rather than having to dig into their memories to recall it.

For first time users, it is best practice to put popular searches instead of recent searches.

example of zero state

Scoping

Scoping is a form of preliminary search by narrowing in on a user’s search category. You may have seen this search design in places like LinkedIn or Slack – they usually take the form of small tags or chips. Rather than the user always coming up with their own search term, we can suggest some categories to help them.

These categories may be popular or suggested searches on your site, or different types of channels within your site.

example of scoping in search

Advanced search

When your site or app has a large volume of information, users need a way to customize their search — such as an advanced search. This could be available before, during, or after a user performs a search.

Advanced search design can look a lot like scoping, but it’s more instrumental. This is an option that would need to be provided to a site/app with a complicated site map, or with many different functionalities. Here are some examples of advanced searches: filtering, sorting, or adding value in finding something in a very specific location.

example of advanced search

Is it really necessary?

Functions such as suggested search, scoping, and advanced search is an intuitive way to interact with the user and improve their search experience. While this may not make it to your priority list, blank search screens and no guidance suggests to the user that they’re on their own, which is never a good user experience.

During search

Typing a search is just search, right? Actually, there’s more we can do during the search experience. Let’s look at some best practices for search design.

Good search design means that when users type in a search field, they should see instant results. This is typically done in the same drop-down that the user initiated their search from. And contents would change according to the user’s progression with their typing.

Our 10 usability heuristics guide this recommendation as well. Providing instant results provides visibility of system status. The user understands that the system is responding to their search. It also helps them correct their errors — another usability heuristic.

Side note: both functions given below should tolerate and auto-correct typos when users make spelling mistakes. This aids in error prevention for the users and reduces frustration.

Auto-complete

When users type a certain amount in the search field and the site shows suggestions within that field (and ideally in the dropdown) — this is called auto-complete. Auto-complete suggestions would be based on previous searches or anything that has maximum relevance.

This method of search design facilitates accurate and efficient entry on the user’s end, which is an increase on user experience.

example of auto complete and auto-suggest

Auto-Suggestions

Auto-suggestions are the shortlists that would be displayed underneath the search field, within the drop-down. This will contain auto-completes if they are present, and the list would also be based on relevance, previous searches, and could also be based on other categories such as what’s trending in a situated area.

This shortlist should be limited to somewhere around 7-9 so users can sift through the items with ease. This is because of Hick’s law – the time that it takes to make a decision increases with the number and complexity of choices.

Auto-suggestions encourage exploratory search, as well as promoting specific items/products/search results without being pushy.

After search (Search result)

Once the search is over the the results are displayed — that’s it right? Well, we still have an opportunity to improve the user experience.

Ability to refine searches

One way we might improve the UX after search is through filters, which are similar to scoping.

Good search design uses filters to refine in your search results page allow the user control. Without a way to refine their search results, users would have to go back a step and search again, now using a different criteria to find their desired results.

example of advanced search

Related searches

Once users have reached the search results page, a user’s main goal is to compare and contrast between the results and find what seems desirable to them. Item list pages like such should not only have accurate results (what the user searched for), but also have relevant and related results as well.

Additionally, the crucial information, such as category specific attributes should be shown for easy comparison – and surprisingly, 46 percent of e commerce websites fail to do this, according to a study done by Baymare Institute.

Other areas that would benefit from search functionality

There are other elements within a website that would benefit from search functionalities, and one of the prime examples of that would be a drop-down menu.

Drop-down menus can look drastically different depending on the amount of information that is available. However one thing is true – the more choices, the more complex it will get. This is where search functionality and auto-suggestion would be extremely beneficial for a long list of drop-downs. The only thing that would be different from an actual search is that drop-downs already give the user the option to browse the predefined categories, and the auto-suggest list would diminish choices that would not match as the user types.

illustration shows dropdown on the left versus text to complete search on the right
illustrations shows 2 search components,: a simple dropdown and a search with populated terms and filter.

Takeaway

Search design is just as important as other features for your product. Humans are creatures that follow the notion of recognition over recall: we are better at recognizing things that involve more cues. A short list of recommendations, suggestions, and guidance will all act as cues for users who are looking for information – with these cues, users will only need to recognize what they want out of this list, rather than typing everything out and hoping that the search will give them the answer they wanted. Boosts on a user’s search experience will always be beneficial, as it decreases the user’s probability of site abandonment.

References

Similar Posts