Intro to Search Functionality in UI

Search functionality is a part of the product's navigational system. It's an emergency exit that helps users find what they're looking for on a page or the whole website and find their way back if they get stuck in navigation.

Search functionality isn't the only navigational feature. Depending on users' level of knowledge, expertise, and goals, they choose different techniques for finding what they need. For example, visitors of an e-commerce website may browse the catalog, go to their wish lists, and recommendations, or use a search input to find the specific item.

There are a lot of options for implementing search functionality, but the most expected variant is a simple text input wide enough to contain a word or phrase users search for. When they hit "Enter" on their keyboard or click the search button, they should receive a list of results matching their search query.

Don't make users search for the search option. It should be easily discoverable and recognizable. Research shows that people are used to seeing the search input or icon in the top center or top right of every page on a site.^[1]

Hiding the search functionality behind the hamburger menu or placing it somewhere else makes users feel frustrated and eventually leads to higher abandonment rates.

The search icon, commonly represented by a magnifying glass, is a key element in search functionality. It should be placed within the search bar, usually on the right or left side, making it easily visible and intuitive for users.

Ensure that the icon is interactive — designed to be clicked or tapped. When users enter a search term and click or tap the magnifying glass icon, it should trigger the search process, displaying the results based on their query.

The search input size should be wide enough to fit a typical search query. Short search inputs force users to use fewer and shorter keywords, which, in turn, leads to bad search queries and poor search results that negatively affect the user experience.

The Nielsen Norman Group recommends using 27-character-long search inputs as it makes search requests easier to read and interpret for users.^[2]

To enhance user experience, consider providing sample search queries in the search box. This can be achieved using placeholders — short, descriptive texts within the search input field that suggest what users can search for. For example, a travel site might use "Search for flights, hotels, or destinations." These placeholders guide users, reducing uncertainty about what to enter.

However, use placeholders judiciously. They can be mistaken for pre-filled information, leading users to think no input is needed. Their often low contrast can also make them hard to read, posing accessibility challenges. Not all screen readers or assistive technologies interpret placeholders effectively, potentially hindering some users from accessing the hints.^[3]

Auto-suggestions, or autocomplete, enhance site search by providing real-time suggestions in a dropdown menu as users type their query. This feature assists users in formulating effective search queries, leading to faster and more accurate results. If no relevant suggestions are available, none are shown.

When implemented well, auto-suggestions reduce the effort users must put into typing, lower the chance of typos, and decrease the cognitive load by allowing users to recognize and select the correct terms quickly.^[4]

Rich auto-suggest not only offers relevant queries but also includes links to related content like category pages, product details, and articles. This enriched approach is particularly effective for users who have a clear idea of what they're searching for. To enhance recognition and usability, adding image previews or category icons alongside text descriptions is beneficial. This visual aid helps users quickly identify the item or category they need.

Ensure that the suggestion dropdown is well-organized and spaciously designed. Cluttered or poorly labeled suggestions can overwhelm and confuse users, detracting from the overall user experience. A clear, visually appealing suggestion dropdown enhances navigation, making the search process more intuitive and efficient.

In search-focused mobile apps, using persistent search can greatly enhance user experience. As per Material Design guidelines, persistent search involves a search input nestled within a search bar, ready for user interaction.^[5] When activated, this input expands to fill the entire screen.

Additionally, it can offer suggestions based on popular or previously entered searches, aiding users in formulating their queries. For example, in a book-finding app, tapping the search bar could expand it to fill the screen, while also displaying popular book titles or genres as suggestions. Users then simply tap the Search button to execute their query. This approach ensures that search is always easily accessible and user-friendly, particularly beneficial in applications where searching is a primary function.

On mobile apps where search isn’t the cornerstone of functionality, expandable search is a good option. Instead of including a full search field in the UI, insert an easily recognized icon such as a magnifying glass that indicates the presence of search functionality without making it stand out too much.

Similar to persistent search, expandable search can also offer suggestions, drawing from past searches or popular queries.

Regardless of the type of search you implement, users usually expect the search results page to be displayed after clicking or tapping the Search button. Because search results pages can return massive amounts of information, choose a proper layout to present content in the most scannable manner.

The selection between a list view and a grid view depends on how much information users need for comparing products and choosing between them. A list view makes more sense for items where details like model numbers, ratings, and dimensions matter. This layout is also a good fit for text-only results.

A grid view layout is usually used when the product's appearance is more vital for making a final decision to purchase the item than its text description.^[6]

Incorporating recent search requests addresses a common frustration — remembering that you searched for something but not recalling the exact terms. When users begin to type in the search bar, the dropdown can display previous search terms as recommendations, tailored to match the current query.

This approach significantly reduces the mental effort required from users. Instead of having to recall past searches or formulate entirely new queries, users can simply recognize and select from the list of recent searches provided. This is especially helpful in scenarios where users frequently return to search for similar items or information.

Displaying related or trending search queries before users even start typing their requests is a proactive approach to enhance the search experience. This method anticipates users' needs and interests, presenting them with popular or relevant search options right from the outset. For example, in an online bookstore, showing trending searches like "Bestsellers in fiction" or "New releases in non-fiction" immediately offers users a glimpse into popular choices, potentially aligning with their interests.

This strategy not only simplifies the search process but also introduces users to options they might not have considered, enhancing their experience and potentially leading to increased interaction with the product.

Globally, more than half of all web traffic comes from mobile devices and this presents unique challenges.^[7] The smaller screen size demands that the search function be clearly visible, and the search results page must be easy to scan. Elements like links, buttons, and inputs need to be large enough for comfortable tapping, considering users often operate their devices single-handedly while multitasking, like walking or commuting.

This recommendation makes sense primarily for search-oriented apps. For platforms like Instagram and Pinterest, where browsing is the main activity and search isn't the primary focus, the search function isn't as noticeable.