Search functionality on websites has quickly become a standard best practice for many websites (especially eCommerce). By allowing visitors to search your site for the information they need, you open a new door to engagement and seamless user experience (UX) that many consumers expect when browsing online.
Because of this shift in user behavior, your search results page on your website needs to meet or exceed these “UX-pectations” (see what we did there?).
If you’re not sure where to start for your website, discover these best practices for search result page design.
- Make sure the results are relevant and accurate.
- Display their query at the top of the page.
- Allow filtering for fast results.
- Show the number of matching results.
- Set the results to display automatically.
- Details are for lists and photos are for grids.
1. Make Sure the Results are Relevant and Accurate
This first tip may seem like a given, but if this is not the case for your website, your search results pages are useless. As you probably know, the first page of results is the most important and should display the most relevant and accurate results based on the query.
Users willl judge your website’s value within the first two sets of search results, so make sure you’re only displaying the best results within those pages.
2. Display Their Query at the Top of the Page
After a user enters a search query, one of the first things they should see on the search results page is the term they used to get these results. This will allow them to recall what they searched, as well as confirm with them that your website is working correctly.
Notice there are technically three places where the query is displayed. It’s in the page title, the URL, and at the top of the page before the results are displayed.
3. Allow Filtering for Fast Results
It’s easy for users to become overwhelmed or frustrated when their search query results are somewhat irrelevant or showing too many results. To cut these down, provide users with filtering options that are relevant and help narrow down their search results.
However, don’t overwhelm users with too many filter options, or allow them to collapse if you do have a lot. After someone selects a filter, make sure it’s displayed at the top of the page to remind them which results they’re seeing.
4. Show the Number of Matching Results
Being as transparent as possible is key to success when it comes to search results pages, and showing the number of results for any search query is a big part of that. This allows users to make a quick decision on how long it would take to review all the possible results.
5. Set the Results to Display Accordingly
The meat of your search results pages are the results themselves, and how they’re displayed is a big thing to consider. There are basically two layouts to choose from: a list or a grid.
If your search results are mostly text results or show a lot of details that are important in a user’s selection process (such as model numbers or dimensions), a list format will be the better option.
A grid layout is a better option if the user does not need these details to filter their results and use the appearance of the search result to make a decision. This concept would work well for visual eCommerce sites such as apparel, cosmetics, or other consumer goods.
6. Details Are For Lists and Photos Are For Grids
However, no matter which layout you choose to move forward with, it’s nice to give users the option to view results in a “list view” or “grid view.”
It’s no secret that search is an important element of building a user-friendly site. Users have come to expect a certain level of UX when researching things on a website, and they typically make rapid judgments about a site’s value based on the quality of your results. By keeping these tips in mind, you could win over a new customer by meeting (or exceeding) their needs.
Have questions about your search results page design? Contact GreenMellen, and we’ll gladly take a look at your site.