Best Practices for Designing Search Functionality

When designing for desktop, keep the search bar visible and easily accessible, rather than hidden behind an icon. While hiding the search bar can save space and is often a practical approach for mobile interfaces with limited screen real estate, it's generally unnecessary on desktop. More importantly, hiding it can impact accessibility and increase the effort required for users to find it.

For websites where search is a primary function, the search bar should be prominently displayed. Users typically expect to find it in the top right corner of the screen, making this a natural placement that aligns with user habits. However, placing it in the header is also a viable option. The key is to ensure that the search bar is immediately noticeable and recognizable, minimizing the effort users need to locate it.

Imagine the frustration of having something you're using suddenly taken away — this is how users feel when their search query disappears as soon as the results appear.

Keeping the search query in view serves a practical purpose. Often, if the first search attempt doesn’t yield the desired results, users may want to tweak their query. Having the original search term still present allows for easy editing.

This design choice spares users the inconvenience of having to retype their entire query from scratch and relieves them from the effort of remembering exactly what they typed initially.

A key principle in designing an effective auto-suggestion menu is to offer a reasonable number of search suggestions — ideally, no more than 10 relevant results. Presenting too many options can be overwhelming rather than helpful. The goal is to assist users in quickly finding the right option, not to inundate them with choices.

Overloading the auto-suggestion dropdown with too many entries can also lead to a cluttered and confusing interface. Additionally, avoid incorporating scrolling within the suggestion dropdown as it can disrupt users' decision-making process and detract from the menu's usability.

According to studies, only 16% of people actually read the content on a web page word-by-word. What about the rest? They scan pages, looking for highlighted keywords, subheadings, bulleted lists, and short paragraphs.^[1]

To aid this process, highlighting matching keywords in search results is highly effective. It helps users quickly identify whether the results contain the information they're looking for. It also makes the page look more scannable and reduces the time and effort users need to find what they seek.

Imagine the frustration of encountering a blank page or a bland "No results found" message. This situation can be a significant deterrent for users, especially if it occurs repeatedly. To retain users, provide helpful guidance on the No Results page.

This can include a brief explanation of why no results were found and suggestions for alternative actions such as:

• Offering alternative search queries
• Providing category suggestions with links
• Suggesting similar items or related categories
• Recommending results based on past searches or popular items

You may also urge users to check their spelling or try different terms but this tends to place an additional burden on them and users generally prefer effortless solutions.^[2]

The results page contains a lot of information and can be remarkably overwhelming. Your job is to make it structured and organized so users can scan results comfortably to find what they need in the shortest time.

Here a few rules for creating convenient filters:

• Don't intimidate users with too many filter options. Keep 5-7 options visible and hide the rest (if you have more) behind the More Filters button.
• Prioritize filtering options and show the most common filters first.
• Make it visually obvious for users what filters are currently applied and allow them to clear all filters if needed.

While filtering narrows down the selection of results based on specific criteria, sorting rearranges the existing results in an order that aligns with user preferences. For instance, users might want to view items sorted by popularity, price (from lowest to highest), or newest arrivals.

Implementing a clear and accessible sorting option allows users to customize how they view the results according to their needs. Position the sorting feature separately from filtering options to avoid confusion, as they serve different purposes.

Pagination is a design technique that divides a long list of items, like search results, into multiple pages. This approach makes it easier for users to navigate and find what they need without feeling overwhelmed.

There are 3 main types of pagination:

• Traditional pagination: Users click the Next or Previous buttons, or jump to a specific page number. It’s common on desktops but can be seen as slow and might discourage thorough browsing.
• Infinite scrolling: This automatically loads more items as users scroll down. It’s convenient as it requires no extra clicks, but can lead to lower focus on individual items and affect decision-making.
• Load More pagination: A Load More button appears at the end of the list, letting users decide if they want to see more items. This method balances the need to browse more products while keeping focused.^[3]

An effective search results page should clearly indicate the success of the search by showing the number of matches found. This feature not only informs users about the volume of results but also helps them gauge the time needed to review these results. By presenting the number of matches, users can better decide whether to refine their search for more precision, broaden it for more options, or use filters and sorting options to better manage the displayed information.

For instance, if users search for a specific term and the results page shows a large number of matches, they might choose to narrow down the search with more specific terms or apply filters like price range or color. Conversely, if only a few results are shown, they might opt for a broader search term to explore more options.

When you offer an auto-suggest search dropdown, differentiate the characters typed by users and the characters suggested by the system to complete the query. It helps users understand why you're offering these queries to them and helps them scan more effectively. You can use bolding, italics, or color to communicate the differences between these parts.

The NN Group offers two approaches to doing this:

• If your system provides suggestions by finishing users' text and appending characters to the end, you should highlight the suggested characters.
• If your system provides the most popular searches that contain users' text anywhere in the query, it makes more sense to highlight the users' characters.^[4]

Skeleton screens are an excellent technique to notify users about what's happening in the system right now. Essentially, they look like grey or neutral-toned placeholders that appear in areas, where the actual content is not fully loaded, and disappear gradually as content loads.

This perfectly communicates to users that results may take some time to load when there's a server delay or poor internet connection. Additionally, slight animation on placeholders intensifies users' anticipation and adds a sense of delight to the process.

User research has proven that skeleton screens on mobile are perceived to take less time than spinners or blank pages. It also observed that participants felt happier and less frustrated when they saw skeleton screens during page loading.^[5]

Ideally, search results should be loaded immediately. However, it's not always possible, and your job is to indicate the search progress and inform users of how long it may take. A good product should notify users about what's going on in the system and provide feedback on users' actions within a reasonable time.

Use progress bars for this purpose when a page doesn't contain a lot of information and loading doesn't take more than 300ms. Show a progress bar or spinner and offer a short but informative explanation of the situation.

If the loading takes time, use a skeleton loader, and add an animation accompanied by witty and helpful microcopy to make the waiting less boring and encourage users to stay patient.