UX for Search 101 🔎️
Design for discoverability: Critical patterns for better user experience
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.
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.
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.
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.
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.
- Auto-suggest
When the interface provides user options before they start typing.
- Recent searches
When the interface shows users shortcuts with their latest searches.
- Did you mean… (Autocorrect)
When the interface autocorrects the user’s input with the most probable match.
- 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.
- 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.
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.
- 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.
- 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.
- 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:
“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:
- 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.
- 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.”
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
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:
