UX for Search 101 🔎️

Gabriela Gentile
Jul 20, 2020 · 10 min read

Design for discoverability: Critical patterns for better user experience

Illustration of an woman searching through different screens
Illustration of an woman searching through different screens
Source: Gympass Illustration library 2020 © — All rights reserved

When I started to work with the search feature as a designer, the challenge was to match results with users’ queries and actually provide a good user experience for it. Sounds easy, right? Well, it’s not.

Most businesses keep it simple with a search box input for a query with 1 or 2 keywords and a basic results page. You’ll love to know that this can evolve to un imaginary extents, and get really tricky.

Quoting Peter Moville and Jeffrey Callendar in their book Search Patterns:

“Search is a defining element of the user experience… Unfortunately, it’s also the source of endless frustration. Search is the worst usability problem on the Web.”

As we started to incrementally add features to our search, I went deep on understanding search-specific patterns that can predict interactions and behaviors from users, to help us build a complete and powerful user experience.

Search box x Navigation

We realized that expecting our users to rely on the search box only, as a solution, wasn’t enough for their discoverability journey.

Here’s is 5 whys from a Nielsen-Norman group study about the topic:

  • Search requires knowledge of the search space
  • Search increases memory load
  • Search has a higher interaction cost than browsing
  • Specific site search can often work poorly
  • Users have poor search skills and don’t know how search works

Therefore, the recommended search model for an effective search considering users’ different behaviors (from novices to experts), is a balanced initiative between specific search and navigation through browsing.

Of course, there’s no one size fits all, but that’s what makes sense to our product and often works well on other products like Netflix, Twitter, Amazon, and others.

Navigation is very important because it provides users with a view of what they can find and teaches them about the structure of the search space, what they can search. Showing upfront content that they can recognize substantially improves usability because it reduces their cognitive load.

“Using the navigation categories is often faster and easier for users than generating a good search query.”

This way, through navigation, we can improve usability by reinforcing one important usability heuristic defined by Jacob Nielsen: Recognition over recall.

Successful interaction patterns

A good benchmark helped us sustain our hypothesis and studies. In fact, we observed that businesses that are great in terms of search have embraced search-centered solutions that combine search and browsing to improve the experience and empower users. These solutions usually have these 3 characteristics :

  • Federated
  • Faceted
  • Fast

Federated

It allows users to search across all of its content simultaneously through one search query. They can view all search results in one list, no longer needing to check everything individually. The federated search engine performs many searches at the same time for the user.

For example, Instagram has a federated search where you can search by “all”, “accounts”, “hashtags”, or “places”. On LinkedIn, you can also search by different databases, like jobs, people, or groups.

LinkedIn and Instagram federated searches screenshots
LinkedIn and Instagram federated searches screenshots
LinkedIn and Instagram federated searches example

Faceted

It provides users the ability to narrow their options and find what they want, without having to guess our different products and structure or do too much filtering and browsing.

Quoting a Nielsen-Norman study on the topic:

“Such narrowing is invaluable for users who need to find something specific within a large content set. (…) A faceted system includes two critical elements:

Simple controls to construct sophisticated searches: Providing familiar controls empowers ordinary users to narrow down a large set of results to a small set that meets their exact criteria — without any special knowledge of Boolean logic or query syntax.

Simultaneous display of the facet controls and the results: Showing both the filters and the results at the same time makes it easier for users to understand the relationship between the two; ideally, this is reinforced by dynamically updating the results set as soon as the user selects a filter criteria.”’

As an example of the faceted search, we have LikedIn, Mercado Livre, and eBay experiences where users can refine their search, without having to go to another page, and can see results updating while they activate the filters.

eBay, Mercado livre and LikedIn faceted searches screenshots
eBay, Mercado livre and LikedIn faceted searches screenshots
eBay, Mercado livre and LikedIn

Pinterest has an interesting solution because they provide not only filters but also similar results as shortcuts on the top, giving the possibility for them to narrow down results without much effort and providing a continuous and fluid exploration of their navigation.

Animated screen of Pinterest search navigation
Animated screen of Pinterest search navigation
Pinterest faceted search navigation

Fast

This one is pretty much self-explanatory and it seems kind of obvious, but it’s a critical defining element for the user experience success, and it was a pattern observed in all search-centered businesses that are successful.

Animated GIF of cartoon Roadrunner
Animated GIF of cartoon Roadrunner

Companies must prioritize technology investments on hardware, software, and staff to deliver sub-second response times. Users expect fast responses from the system on every level of their discoverability process. It doesn’t matter their behavior, from expert to novices, they all expect quick responses.

There are many more search interaction patterns documented, but these 3 are the ones that are present on the majority of successful design cases.

Design patterns

Besides the interaction patterns, we can also rely on design patterns to help us build a good search experience for users. There are design patterns that are already used by many players like Google, Amazon, and others. We know that they work, and we can apply them to our products gradually.

Here are a few examples:

  • Autocomplete

When the interface completes the sentence input with possible outcomes.

Google autocomplete search
Google autocomplete search
Google’s autocomplete example
  • Auto-suggest

When the interface provides user options before they start typing.

Different screen shots with auto suggest feature as example
Different screen shots with auto suggest feature as example
Auto-suggest examples
  • Recent searches

When the interface shows users shortcuts with their latest searches.

Recent searches examples from Pinterest, Facebook, and LinkedIn
Recent searches examples from Pinterest, Facebook, and LinkedIn
Recent searches examples from Pinterest, Facebook, and LinkedIn
  • Did you mean… (Autocorrect)

When the interface autocorrects the user’s input with the most probable match.

Autocorrect example from Google
Autocorrect example from Google
Autocorrect example from Google
  • Related search

It provides users different search options that are related to the query that they input, working as shortcuts for better navigation, implying less cognitive effort from users.

Amazon and Google related searches feature
Amazon and Google related searches feature
Amazon and Google related searches feature
  • Personalization x Recommendation

Personalization is when the system captures information from interaction behavior or previews queries from users and translates into the interface in the form of recommendation. For example: “Because you love Yoga” or “Because you’ve watched Friends”.

In short, personalization can only occur based on the user’s personal usage of the product, so the engine can learn from it and translate it into personalized recommendations.

However, we can also recommend content not based on personal usage but on overall patterns, like “Popular in your city” or “Most users love this”. It’s a recommendation, but not personalization.

  • Pagination

Pagination is a design pattern that works great when users are looking for something specific throughout a component that divides the content into separated pages.

Animated GIF simulating pagination feature on a mobile application
Animated GIF simulating pagination feature on a mobile application
Source: Pagination by Sybille Cordeau

Also, it can be relevant for users to see how many results they got from their query input: It provides them, combined with the screen pagination, with a sense of control and orientation.

Amazon and LinkedIn screenshots of numbered results page
Amazon and LinkedIn screenshots of numbered results page
Amazon and LinkedIn examples
  • Sorting

This design pattern allows users to control in which order they want to see the results and set their preferences. Providing more than one option to display the results creates a more flexible experience that can attend different needs from different users.

Animated gif of an sorting feature example
Animated gif of an sorting feature example
Source: Sorting button by Daniel Rasmussen
  • Structured Results — Visualization

Structured results pattern means reshaping our results, changing the visualization, and transforming the query results in a different form of visualization that helps the users recognize quicker the chunk of information and learn from it.

Google’s structured results examples: showing how they structured COVID 19 and maps results
Google’s structured results examples: showing how they structured COVID 19 and maps results
Google’s structured results examples
  • Actionable Results

When the interface provides users with the possibility to take action on it, like for example to save, favorite, or share something. Understanding what users would like to do with your product results can shorten a step for many of them.

Twitter is a good example of this pattern, you can take many actions right from the results page, such as commenting, retweeting, favoriting, or sharing:

Animated GIF of Twitter actionable results example
Animated GIF of Twitter actionable results example
Twitter actionable results example

“In short, actionable results are the next step for users and for search. We must stay focused on the goal and design for results beyond results.”

  • Unified discovery

This pattern is for federated searches: it searches the query on many databases. The “unified discovery” design pattern provides the user with a screen where they have the option to see all results together on the same page.

As an example, we have the “All” and “Top” tabs from Google, Instagram, and Twitter respectively:

Google, Instagram and LinkedIn examples of their unified results page
Google, Instagram and LinkedIn examples of their unified results page
Google, Instagram and LinkedIn examples of their unified results page
  • Best first

This is a significant pattern to look at while you are designing search experiences. The “best first” pattern may vary depending on the system, interface, and task, but it’s safe to say that the first results will always drive more attention than the rest of it. The CTR for the top results will always be higher because it implies fewer interaction costs for users.

Despite looking like a simple feature, the "best first" pattern can be a defining element of user experience. It should support users who are looking for a simple lookup search, but also provide support to query refinement for advanced patterns.

Best first from Google
Best first from Google
Best first from Google
  • Alternative Views

When the interface provides users different ways for them to visualize the content.

There are several reasons why we use this pattern. Quoting Charles Brewer, Aynne Valencia, and Jenifer Tidwell on their book Designing interfaces:

“Users have preferences with regard to speed, visual style, and other factors.

A user might need to temporarily view data through a different “lens” or perspective in order to gain insight into a problem.”

Multiples screenshots of Amazon example of alternating views
Multiples screenshots of Amazon example of alternating views
Amazon example of alternating views

Some users recognize and understand the content better by reading, while others can be more image-driven. Applying this concept to the search, we can provide different options to display information to users and they can choose from what works best for them to understand the content.

Conclusion

Illustration of 2 women smiling and congratulating each other
Illustration of 2 women smiling and congratulating each other
Source: Gympass Illustration library 2020 © — All rights reserved

When I started to work with the discoverability journey for the search, it was very hard to find content summarized on the topic for designers. I wrote this hoping that I could help more people that are working with search or just curious about it.

Studying search patterns was very important for us to design a better experience for our users. Those patterns helped us to shape a new vision for our product based not only on our business’ and users’ insights but also on market insights.

The ones explained in the article are only a few out of the many interactions and design patterns that a search can have.

If you have any questions or if I can help you with anything, feel free to reach out to me on my LinkedIn profile.

Don’t forget to clap if you enjoyed it ;)

Thanks!

References for this article and other cool links about the topic:

Gympass

Making Wellbeing Universal

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store