Search Results Page Design: Top 5 Best Examples

Search results page UX design defines the search experience. It can either welcome users, push them away, encourage them to go further or confuse them with monotonous blue links. Arounda team has been developing UI/UX decisions for web and mobile applications for five years now, and search pages are no exception. 

Table of Contents

• Input Features

• Informational Features

• Control Features

• Personalization Features

• 5 Examples Of The Best Search Results Page Design

• Conclusion  

In this article, we will:

• cover some basic principles of search page functioning, 

• discuss how to improve informational, control, and personalization features as well as page layouts, 

• and give inspiring search results page examples.   

Input Features

Let’s consider the search a user-website dialogue. It all starts with the first word of a query in the search box. The system immediately reacts with an auto-suggest list of word combinations and then with the set of results. 

We often don’t know the ‘right’ keyword or phrase for our query. For instance, not many people know the common search results pages design abbreviation SERP, which stands for 'search engine results page.' 

Users take for granted that the search page corrects their typos, rephrases the input, or asks 'Did You Mean…’. But if not, they quickly move to another blog, magazine, or news page which is more supportive, including YouTube. However, it's not always competent. The task of the search results page UI design is to make the autocomplete as predictive as possible. 

You could implement autocomplete through HTML CSS coding, with JavaScript coding, use a ready plugin such as jQuery autocomplete to insert a search box widget to the site, or even turn to AI technology like Luigi's Box proposes.  

Informational Features

The primary function of the search results page is to display items that best match an input query. But the algorithm behind the typical list of links is complex. The relevance of search results is calculated from keywords in content and metadata, inbound links which show resource popularity, user behavioral cues, and other factors. Then, the search engine selects the most corresponding results for the first output page. Sometimes well-designed search results page places the top 10 results in a separate box. 

There could be thousands of matches to the query, and the search results page provides Information features that help to pick the best for you. Typical information features include:

• total number of matches

• hyperlinked titles, URLs, page previews, snippets, or demo videos

• metadata like page sharing rate or quotes

• sponsored links or advertisements

• related searches results

Control Features

Additional control features that help construct a specific query and filter the best matches are usual for all kinds of online department stores, job sites, and travel and booking sites. Customers can search by price, brand, area, color, popularity, men/women categories, RAM size, or flight date. Of course, it all depends on the product types and variety. 

The only reason to implement extended control features is users' confidence in choosing what they need and clicking an 'Add to cart' or 'Book' button. The best search results page design is often down to the ground.

Advanced search control features are:

• pagination, long lists of items are split into smaller separate chunks. 

• faceted navigation menu with filters by attributes such as date, delivery time, weight, size, brand, price, etc. 

• multi-faceted summary with clusters in treemaps or piecharts by the percentage of matches

• predictive help

Personalization Features

Customization and personalization distinguish customer-oriented search results design and help your resource stand out. Usually, personalization features include the user's profile, individual settings, notifications control, language, and so on.

You could also allow your website visitor to play with text or background colors, the number of search rows, and other widgets attributes. These entertaining elements of the web design search results page make the person feel at home at your site and continue interacting.  

Page Layouts

Page layout is how you arrange the search output on the screen for better perception and convenience for the user. It depends on the type of product or service you are presenting in the first turn. In simple words, the mobile phone search result page design in AliExpress can't look like a job search in Upwork.   

There are five classical search result page layouts to choose from.  

Visual Oriented 

The most common page layouts are horizontal lists. They are the most logical way to sort the search output for most product types. One more leveraging disposition is a greed gallery. Retail shops often use this layout to demonstrate the picture of a product because images attract more attention than plain text. Some sites allow you to select the view mode and switch between these two layouts. 

Detail Oriented 

On the other hand, tech products such as computers or mobile phones usually come with numerous characteristics. The information about processor type or guarantee period affects the decision more than a photo of a device. Therefore detail-oriented search page layout is preferable. 

Full Display 

The full display layout shows detailed characteristics of several products in one table. Columns stand for one product type, and rows for details of their specification. For example, the full display layout on the Apple page helps you compare MacBook Air and MacBook Pro 13” computers without switching between browser tabs. This layout makes more sense to the customer in the case of complex electronic products. 

Map

When people search for a restaurant or a hospital, location can be essential for their choice. A two-dimensional map will be the most natural search page layout in many searches with geospatial elements. Google Maps give an outstanding example of this approach. 

Clusters 

Search pages with clusters happen rarely. One of the best search page designs in this layout is a Carrot2 engine. Search results get grouped into theme clusters—their colors and areas visualize the diversity of search results and invite users to search further. 

Blended Results

As we already mentioned, the product or service type defines the search page layout. It guides the customer to a shopping basket or checkout page and narrows the search with every next click. But sometimes, the goal of the resource is to show the diversity of related topics and content types like videos, maps, or news and encourage the user to dig deeper. For example, a Pinterest search page beckons your eye with different side suggestions quite professionally.     

Zero Results

Unfortunately, not all users' queries will have matches. This is a usual case for a “search within.” We try to avoid a zero page with a pessimistic 'Not found' in the search results page UX design. Instead, you can see a zero page as an opportunity to give advice, ask to rephrase the information input, or amuse your guest with a humorous line. 

5 Examples Of The Best Search Results Page Design

Now that you know how the search page functions, let's look at the top professional search results page examples. 

Amazon

Amazon wouldn't have won world recognition without an effective search mechanism. The faceted navigation menu gives filters for each product type. For instance, if you search for 'books' you can filter results by price, delivery date, Prine reading eligibility, customer review, author, and more. There is a winning combination of a grid gallery, horizontal page layouts, and comprehensive auto-suggest. 

A zest of the Amazon search results page design darkens the main page when you hover the search box. This contrast eliminates distractions and helps you concentrate on your search. 

LinkedIn

Linked in is a great example of a user-friendly page layout. On the left screen half, you see all the search results, while the right side of the screen gives a detailed description of the company and the vacancy. Furthermore, users enjoy comfortable category filters in the horizontal menu and a separate search box to choose the location. 

Pinterest

This platform's delightful grid layout emphasizes the beauty of the visual content they deliver. You can search either by idea or by profile. The colorful variety of search directions grouped in topics like hiring, illustration, logo, quotes, and much more shows a marvelous blended search result example. 

Quora

The Quora search page sidebar is another solution of additional control features for your convenience. For example, users can sort search results by time, type, and author. Moreover, Quora presents an elegant detailed view layout with all the necessary info about the post. 

Carrot2 

The last of the search results design examples is Carrot2 SERP. Here you can gaze at the brilliant visualization of the related search topics, choose between three layouts, 'list,' 'tree-map,' and 'pie-chart,' and experience a rare cluster search approach.

Conclusion  

The well-designed search results page is an opportunity to develop trust with the user and habituate him to your resource. Our final recommendations sum up the knowledge of search page features and the experience of the Arounda team in UI/UX design for startups and SME clients:

• Ensure effective auto-suggest and allow to edit the query in place

• Highlight featured results with colors, snippets, videos, and other visuals. 

• Apply a search page layout that corresponds to your product or service the most

• Support the diversity of search results with sidebars or complementary panels and let the users explore your resource

• Avoid the feeling of the dead-end on the zero result page. Instead, make it encouraging and helpful.

Arounda has developed search results page UX design for corporate websites SaaS, web, and mobile apps. So if you are looking for practitioners to improve your product usability, just drop us a line!