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.
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.
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.
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
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
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 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.
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.
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.
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.
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.
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.
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.
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.
Now that you know how the search page functions, let's look at the top professional search results page examples.
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.
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.
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.
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.
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.
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!
If we look at the search as a dialogue between the user and the website, a good search result is the one that helps to solve the problem. The search page should autocomplete suggestions, present output results in the most convenient layout, and support expanded filter tools. All of this is for the user's confidence in decision-making.
We suggest going through the checklist of search page:features to improve your UX design, effective auto-suggest in input features, information features with corresponding layouts, featured results highlighted by colors, snippets, videos, and other visuals, control features with sidebars or complementary panels, blended results to support the diversity of search results, encouraging and helpful zero-result page
Sign up to our newsletter to get weekly updates on the trends, case studies and tools