Search is the lifeline that enables users to navigate complex interfaces. The basic search that takes a single parameter — typically a search term — is often sufficient for simple websites and apps, but how can you give users more control over the experience?
To enable efficiency and precision, allow users to refine their queries by implementing advanced search functionality. Here is how to do it:
Advanced search is a UI feature that allows users to refine the content they’re seeing by narrowing down the search criteria. This is achieved by applying additional filters and facets — the terms that are often used interchangeably, but filters and facets have important distinctions.
Which filters and facets will be most helpful to the user largely depends on the context. Examples of the most common filters include category or type, price range, time period, language, location, file format or size, and so on. Faceted search enables the user to manipulate these further, for instance, by searching within a specific set of fields such as the title, author, or publisher.
Many interfaces rely on the advanced search functionality to empower their users to retrieve relevant results. It’s especially common for navigating large datasets or when the information users are looking for is highly specific.
Perhaps the most common example that the majority of internet users encounter is search engines like Google, Bing, and Yahoo! that allow users to refine their search queries to get more accurate results. This feature is common on ecommerce sites, helping future customers to locate their desired products; job portals, assisting prospective applicants in finding suitable listings; educational platforms and learning management systems (LMS), enabling students to shortlist specific courses or resources; and much more.
Despite its widespread use, it’s worth noting that advanced search is a complex feature that places a lot of responsibility on the user. Even a well-designed experience can cause confusion, so a good rule of thumb is to start with the essential functionality and build up layers of complexity that the user chooses to engage with.
At the heart of this complex feature is a regular search bar, which is where the journey originates from. All the general usability principles for search, such as predictive search or autocomplete, apply here.
But unlike the basic search, the real power of this advanced feature comes from the opportunity to define additional search parameters, so let’s dive in:
The first decision you will need to make is whether to display or hide the filters by default. There are pros and cons to each approach, as they often take up a sizable proportion of the screen real estate and risk distracting users from the main content, but they can easily be missed if their whereabouts aren’t obvious.
While the options for how to display the search parameters are only limited by the designer’s imagination, most modern-day interfaces use a variation of the following four patterns:
It’s worth noting another format of advanced search that is performed entirely inside the search bar and requires no additional features: query-based search. It allows users to define search parameters by applying specific syntax to the search term itself, but it relies on extensive prior knowledge and typically does very poorly when it comes to feedback and error prevention.
Once you have settled on the overall placement of the search parameters, you will need to make a set of decisions about the most appropriate input format for each one of them. Again, the decision will consider the unique context of the interface you’re designing, but here are some of the most commonly used input formats:
It’s not uncommon to customize the default selectors, for example, by adding swatches to a color picker or icons to text labels. These visual cues can greatly aid usability, but make sure to follow accessibility guidelines and provide aria-labels for all visual elements.
There is no rule defining the optimum number of search parameters, so strive for a balanced approach that offers enough control without overwhelming the user. Test this feature extensively to get the balance just right!
There are two options for applying the search parameters, each with its advantages and drawbacks:
As a compromise between the two solutions, consider grouping the search parameters into broader categories. This reduces the number of content reloads, while still offering intermittent feedback to the user.
As a general rule of thumb, none of the filters should be applied when the user first engages with the search, allowing them to begin from the full list of results and narrow it down step by step. There are some exceptions, for instance, when inactive or disabled items are hidden by default, but make sure that the user can easily see and undo this.
In a nutshell, every search produces several results that are most commonly displayed either as a list or a grid of individual items, or else as a table. Both variants should include the result count and controls for sorting their order.
Nowadays, it’s not uncommon to see much more elaborate search result layouts that incorporate featured content in various formats. A notable example is the Google search result page that dramatically evolved over the past decade.
Unsurprisingly, this drastic change in the content presentation had a significant impact on the user behavior, distributing their attention in a pattern labeled the pinball effect.
Depending on the layout and complexity of the search parameters, it’s a good practice to provide their summary alongside the list of results. This is especially common in ecommerce, with platforms like ASOS and Vinted showing all applied filters as tags above the search results. This feature allows the user to quickly review, edit, and clear the filters, as well as save them for future use.
Consider the edge cases, for instance, the scenario in which the search query returns no results. The right solution for this depends on the context: a user searching their mailbox for email from a specific sender is unlikely to be interested in messages from someone else with the same name, so it’s best to return an empty results page, while someone shopping for a gift on Amazon might be keen to explore related options, so you can offer carefully curated alternatives. In either case, be very clear if you’re showing results that don’t fully match the search criteria to avoid misleading the user.
Understanding the context in which the search is performed is crucial for designing truly user-centric experiences. Modern interfaces can detect the user’s language and location, analyze their past behavior, and use natural language processing to gain insights into their intent in an attempt to provide more relevant search results. This personalized approach is often welcomed by users browsing social media, choosing a takeaway to order or a movie to watch, but it can be extremely problematic if applied to news media, financial services, healthcare, and so on. It’s a fine balance between supporting and enabling your users, but this is where great design can truly shine!
Header image source: IconScout
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Subscription pages are meant for users and businesses, and they should work well for both parties. This blog is a thorough discussion of what’s best and what’s not when it comes to designing subscription pages.
Call it what it is. Product designers and UX designers have unique roles, even if their titles often get swapped. In this blog, know the difference and own your expertise.
Search bars are more than icons and inputs — they can be a retention magnet or a churn trigger. Sharing my tried-and-tested search bar design principles in this blog!
Are your colors clashing or cohesive? In this blog, I talk about clashing colors, their impact, and how you strike the perfect balance with colors in your designs.
Learn more →
