Search results page design — UI/UX best practices

Imagine the following situation. You have a business, and your main goal is to attract new clients while retaining the existing ones. Your products are of high quality and pretty popular, however, the website makes no headway. There may be a couple of reasons for that, such as poor search functionality, non-user-friendly navigation, or a crude "No Results" page that doesn’t even offer any options or tips. In most cases, after such a "traumatic" experience, customers leave and rarely return. To avoid these blunders, we suggest revising your website’s design and, specifically, its search results page.

Basic Principles

When we think of search engines (it doesn’t matter which exactly, as they all function in a similar way), the first thing that comes to mind is the precise results that help users find exactly what they need. That’s the way it is, and that’s what everyone is used to. However, there are some additional features to consider — in the age of digital development, convenience, proficiency, and versatility are the key factors for success in any work field.

Now let’s take a look at some not-so-obvious supplementary options, which are sorely required for the perfect search process.

We'll start off with Input features. These super-helpful components complement the search bar with autosuggestions, facilitating correct and efficient queries and saving your time if you are not a fan of typing. Without this feature, making search queries would definitely be more frustrating.

Next, there are Informational features. It is a whole set of components that consists of various types of similar queries, found results, a bunch of individual results that include hyperlinked titles, and support for inquiry rephrasing and autocorrection, for instance, "Did you mean…?".

Always allow users to see their initial text in the search bar. When the customers cannot find the desired items, it is crucial they try again.

Moving on to Control features. In our humble opinion, these are pretty helpful functions. The versatility of the search tools menus (sites, visited pages, etc.), different variants of advanced search, faceted navigation menus, sorting, and pagination all come into play to make the search more efficient.

Last but not least are the Personalization features. These features help provide customers with tailored and relevant search results based on user profiles or activity. And this is especially applicable to e-commerce websites. For example, if you've searched for dog food, you may see a suggestion to take a look at pet toys during your next attempt. Putting two and two together like that isn’t that hard, really, especially if customers complete their website profiles with personal preferences.

The trick here is not to go overboard with predicting what the customers want (or don’t even know they want yet), as some might find it rather creepy and off-putting.

Page Layouts

Right now, there is a big variety of search page UI designs aimed at making the search more functional for customers and, consequently, more profitable for the owners. Let’s look at key factors that will help you improve both the user interface and user experience.

Make your results page less overwhelming

The task of each search bar is to provide the users with a results page that will satisfy their needs. However, there are significant differences between various types of sites. For media-sharing platforms like Instagram or Pinterest, it may be a better strategy to use endless scrolling and loading as many results as possible. Adding a "Load more" button is also an option — it may be visible when there are interruptions with the Internet connection and the next batch of the images has not loaded yet. For e-commerce websites, though, it makes sense to use pagination.

Don’t erase users’ queries after they press the search button

Always allow users to see their initial text in the search bar. When the customers cannot find the desired items, it is crucial they try again. To facilitate that and to save their time, leave their initial request be, making it easier to edit on the spot.

Choose the proper page layout

It’s also important to remember that when searching in varied collections (different item types), for example, in a department store, the page layout will depend on the types of items in the queries. If the appearance matters for the product (e.g., cars, clothes), the most appropriate layout will be visually-oriented.

In other cases, you can provide a detail-oriented layout when appearance is not so critical (e.g., laptops, devices). Basically, use details in lists and pictures in grids. The extra handy option would be allowing users to switch between these two views on the fly.

[fs-toc-omit]Blended Results

In general, various types of search results require using different layouts, and many content-rich websites are willing to inspire users to explore more. Such sites take a much more ingenious approach, offering users blended results. These are layouts that mix different media after the search. This leaves users free to choose whatever they like: news, videos, photos, maps, and so on.

[fs-toc-omit]Zero Results

Although most search engines provide autosuggestions and a feature set to find the most accurate results, some queries simply cannot be satisfied. This is when the users see the dreaded zero results page.

The problem is that this page might scare away potential buyers, so website owners should try to minimize these kinds of engagements. If they are indeed inevitable, take a gander at the following practical tips to make this experience more amicable.

First, you need to explain that there are no matching results intelligibly and politely. In doing so, you can also suggest removing some filters or searching in other categories. Providing additional suggestions with "Were you looking for…?" would also be beneficial in this case.

Furthermore, there are alternative ways of solving the problem. For instance, you can offer different options between similar queries, and remind users to check it for spelling or even rephrase it. Another helpful feature would be prompting your customers to contact customer service or asking them to provide feedback in a designated field. However, it’s worth noting that despite all this, certain visitors will still be left frustrated.

‍

7 Key Tips for Improving Search Results Page UI

Unfortunately, many website creators or owners make a mistake by neglecting the user interface and user experience. And this is a crucial factor. In some ways, UI and UX are a site’s greeting card — a marker expressing engagement, willingness to help, and desire to make the users’ stay as convenient as possible.

When deciding between two stores offering similar products, which one would you prefer? The one with unclear navigation, lack of media content, and absurd search solutions? Or, the second one with high-quality videos and pictures, perfect adaptability for your smartphone screen resolution, and a user-centered approach? The answer to that question is clear for many.

To help you avoid mistakes, we invite you to learn about the most hard-hitting methods of improving search page UI design.

1. Make sure your search bar stands out

We will start with a few simple tips that always work. For one, you should remember that if your customers can’t find what they need, at least allow them to understand how they can search for it. And here’s what we mean by that.

It’s scientifically proven that the majority of people are visual learners. That is why UI matters so much, and so your search bar shouldn’t be hidden under lock and key. It has to be located in a visible area so that your potential clients wouldn’t have to waste their precious time looking for it. After all, their time is your money.

Furthermore, the search bar must match your website design, delight the eye, and invite customers to use it. If there is an advanced search option, it should also be well-defined.

2. Intelligent search helps users find the right query

Some of you may relate to this example. Suppose a user intends to type "Pinterest" in the Google search bar, but as soon as they type "Pi" in, a list pops up with "Pizza Hut." Suddenly, this changes their initial goals, and now they're thinking about what kind of pizza they'd like for dinner. In a way, this exemplifies the theory of intelligent search.

Now how will it work on your website? By providing various autosuggestions and diverse search alternatives, you increase the chances of turning the average person into an exclusive buyer. Again, science plays its role here — we find it hard to resist browsing when faced with various interesting options. That is why it’s best to give as many alternatives as possible without being overly intrusive, naturally.

Even if your website leads users to a page with no results, it should always offer alternatives or a list of recommended similar items.

3. Provide quality information

This step consists of a couple of smaller ones. For starters, provide precise and relevant results. The first page should look as best as it can. Besides the obvious business-related benefits, visitors often perceive this as a marker of a website’s quality. Remember that people usually decide whether to stay on a site based on the first three search results.

Show the number of search results. As strange as it may sound, this is important to the site’s conversion rate. Such a bit of information lets users realize how many alternatives they have, thus facilitating their stay and search on a website.

Save the time of your users by keeping their search queries. For some, creating queries requires quite a bit of effort. One simple rule to remember is if you can save your visitors’ time, always do it. Even if people have visited your site before, it can be hard for them to recall what information they looked for. Save all the recent requests and furnish them next time. Bear in mind, though, that various devices may need a different number of saved queries.

Don’t conceal search progress. Ideally, search results should be provided on the spot. If for some reason, this is beyond the realm of possibility, you should at least let users know how long it will take. In such cases, it is appropriate to use a progress bar or a visual indicator to reassure your visitors that they will get results soon.

Keep the number of clicks to a minimum. The process of clicking is boring and menial on its own, but when it piles up needlessly, it becomes the most irritating thing ever. Keep it simple and give your customers what they might need. Put the "Add to cart button" in a visible spot on the search results page to pave the way for converting simple visitors into customers.

Offer advanced search options. This feature allows users to customize their search according to their preferences, perceptions, and resources. Let them feel their choices matter and convince them they'll get only the best. Filters can prove to be a great tool here. Show the people you're on their side and persuade them to take the next step.

4. Answer your customer’s questions

Imagine that you visit an online store and search for a cottagecore cardigan. It’s no longer available, so after inputting the query, you get a plain cardigan that doesn’t meet your needs. What’s more, there is not a single word to be found relating to your requirements. This may be quite unpleasant, annoying, and tiresome. The way to avoid this difficult situation is to provide details about the missing items and data regarding their availability. Allowing users to submit a request to be notified when the item will be back in-store is also a good idea.

The site’s purpose in this regard is to be an informal sales representative. Try to anticipate as many additional questions as possible and provide answers to them proactively. Remember, however, that your suggestions are only an alternative if they can’t meet the customers’ needs to the fullest extent.

5. Make use of semantic search

It has been well said that semantics is everything. Sometimes we want something but can’t figure out what it is. That’s where semantic search comes in. Don’t underestimate this feature because it has the biggest positive impact on UX — simply by providing multiple synonyms, such as "smartphone" instead of "cell phone," and so on. On top of that, semantic search does not impose any restrictions on users’ queries compared to exact keyword searches. It also captures the purpose of the query and is not merely a mechanical response to keywords.

As a search engine utilizing semantic search, DuckDuckGo outputs all the keyword meanings among the first results. Most importantly, it also features an extra panel that allows you to see alternatives, thus meeting customers’ needs and creating their own information field.

6. Remove any dead-ends in the customer’s journey

As cliché as it sounds, no one is perfect, and people can make typos when entering a query. The best bet here is to minimize the chances of users getting an empty "no results page" and leaving dissatisfied.

Remember, even if your website leads users to a page with no results, it should always offer alternatives or a list of recommended similar items. If it doesn’t happen, you might as well say goodbye to your customers.

7. Ask for customer feedback

If you want to improve your site’s search efficiency further, there is no better aid than people’s thoughts and feedback. When asked, customers are often willing to lend a hand to developers and owners, so don’t be afraid to read a little bit of criticism, especially if it helps your business grow.

Faceted search is evolving into a consistent model for the e-commerce industry.

7 Search Results Design Examples You Will Find Inspiring

We've already discussed common mistakes and efficient methods for eliminating them. Now let’s take a look at the best motivating, aesthetically pleasing, and inspiring examples of search results design.

Trends in Search Engines

Right now, it is hard to imagine trendy search bars without features like artificial intelligence, both for typing and voice search. The list is quite impressive — semantic search, geolocation tracking, visit history, you name it. These algorithms are also used for advertising, and they vary greatly.

Google

Despite its long tenure on the Internet market, this old-timer continues to make hay while the sun shines at the same time teaching competitors a thing or two. Among its top functions are voice recognition and typing, the option to use keyboard display, search by image, and many others. The main disadvantage here, in our humble opinion, is that Google might be just a tad bit too intrusive when it comes to data collection. As you've undoubtedly noticed, it consistently keeps tabs on users, monitoring our movements, preferences, and online behavior.

DuckDuckGo

Founded in 2008, DuckDuckGo is a relatively young counterpart in this regard and is the exact opposite of our previous entry. Among its advantages are the ajax module, the option of advanced search with many filters concerning even the page’s interface (screen resolution, font style, size, etc.), and the very feature that just might put it on a par with Google — privacy protection and data encryption. Unfortunately, DuckDuckGo lacks cool features such as voice recognition and image search. So it’s up to you to decide what’s more important: a wide variety of features or your privacy.

Search Results on Video Sharing Sites

When speaking of this search type, we want to point out that sometimes users need high-quality video content with specific features or conditions, and an ordinary search engine isn’t always up to this task. In such situations, we turn for help to video hosting sites with a built-in search engine tailored specifically for that.

YouTube

Again, let’s start with a veteran in the video hosting industry. We know you instantly thought of this one too. Launched in 2005, YouTube has been the number 1 video platform worldwide ever since. On top of its many other advantages, it has features allowing you to delete recent requests, see thumbnail previews, clip duration, viewer ratings, and load times. It also has different categories to help you find what you want: HD, Live, 3D, Location, etc.

Vimeo

In addition to the many useful features we mentioned in the YouTube part, Vimeo features sidebar filters that allow users to customize their search according to their preferences. This way, they can exclude what they don’t want to see in the search results. Nice little touch!

Search Results on Social News & Mini-Blogging

Now, at a time when social media platforms prosper, providing users with a myriad of features, website owners need to understand one simple truth — embedded search bars need to evolve along with the audience. So, let’s take a closer look at these examples.

Twitter

With Twitter having so many users, it may be difficult to find that bit of relevant information. And where Twitter’s basic search may struggle to help you dig through the myriad of posts, its advanced search functionality comes into play.

Twitter offers quite a few conveniences, such as splitting page results into different groups (Videos, Recent, People, etc.), various filters, and the option to save searches for future reference. The "What’s happening" and "Who to follow" sections offer an additional layer of information that might be interesting. On top of that, Twitter also features a safe search mode allowing users to shield themselves from sensitive content or any blacklisted users.

LinkedIn

This is an excellent example of a social network created not as much for entertainment but rather as a tool for personal fulfillment, communication, and immersion in work-related matters. Here you can find everything from information about the person you are interested in, to various requests, photos, logos, and data about common connections. Many filters, as well as tags and boolean search (used to limit, broaden, and define search results), only increase your chances of finding what you need.

Search on Merchandise & E-Commerce

Faceted search is evolving into a consistent model for the e-commerce industry, and it’s no surprise — it has a wide variety of features, such as narrowing your search by selecting a checkbox or clicking on a link. Compared to advanced search, faceted is an obvious winner because of its clarity and lack of congestion.

To keep it that way, follow some simple rules. Don’t overcrowd your page with too many filters (10 will be enough); hide unnecessary facets in the "More facets" section; place filters above products (horizontally and vertically), and don’t neglect tags because this is the easiest way to find the desired products.

Amazon

Being one of the first online retailers in the world, this veteran is keeping up its zeal and continuing to improve year after year. Among the best features to meet your needs are the numerous filters and sorting methods, product ratings and descriptions, a "Best selling" feature that shows what people buy more often, and "Amazon’s choice" highlighting the best items according to the site. It’s convenient, stylish, and modern.

Yelp

Among the broad features of this platform, we'd like to point at the narrowing down of options by selecting the type of service and location. Only after that do additional filters appear. Yelp also uses tags in the result cards, which serve as an additional search tool.

Search Results on Photo Sharing Sites

Image sharing sites allow us to upload and host various types of content — from images and photos to vector graphics. And it goes without saying that for websites with huge numbers of images, having a clear and accurate search functionality is a must.

Iconfinder

This is a pretty cool site that was launched in 2007. It is widely known as a helpful tool for web designers and anyone who wants to use original and creative photos or icons. Among its other cool options, there’s a package of numerous settings and filters — you can even choose the background you like. Convenience and practicality are the main motives of this platform.

Flickr

Flickr’s search engine is detailed and elaborate. It supports features such as view change, advanced search, as well as size, date, image background, and orientation settings. Since Flickr is not only an image site (other than photos, there are also Groups and People sections), users can directly look for the right category when they first visit. This helps them narrow down the search and hide what they don’t need.

There is another interesting feature here — the advanced search appears only after users enter their requests. This is done not to overwhelm visitors and allow them to configure their search only when necessary.

Search Results on Technology-Related Sites

When it comes to search results pages for technology-related sites, usability and functionality are the top priority. The phrase "technology-related" implies that site visitors should be well-versed in software, hardware, or even both. Not only that, but in most cases, customers of such sites are practical people. That is why it is important to make the site, particularly its search bar, convenient, versatile, and flexible.

Adobe

Founded in 1982, Adobe never ceases to delight us with software products such as Photoshop, Lightroom, and many others. Its search contains such useful features as categorization (Learn, Support, Communities, and Product information), number of results, and advanced search. Users also can tick the box for the exact software they're interested in, narrowing down the search significantly. If it’s a video they're looking for, the site will also conveniently show its duration along with a short description.

Apple

Let’s look at the world-famous brand popular for its style, convenience, and exclusivity. Apple’s search results page offers different sections (Explore, Accessories, Support, Find a store) and numerous filters. On this page, users can find "compare," "buy," and "support" buttons which ease navigation and improve the UX significantly. The aforementioned "Accessories" tab cleverly allows users to look at the peripherals available for the item they've just searched for. And this may lead to more than just one purchase at a time!

Search Results on News Websites

Last but not least, we have news websites. Nowadays, not everyone has the time for TV or newspapers, and there is an acute need for sites that will provide the latest news quickly, clearly, and conveniently. Needless to say that in order to cope with this task, they must have a well-designed search bar.

Fox News

This is an example of a news site that impresses users with its content’s diversity and its search bar’s convenience and simplicity. Upon entering the search page, you will be greeted with various topics to kickstart your search. The results page itself includes settings by category, content type (articles, videos, and slideshows) and date range, useful content date markers, and the number of results.

This site’s search functionality is not something extraordinary, but it doesn’t have to be — it gets the job done as it is without being overly confusing.

The New York Times

This is yet another example of a thoughtful approach. The New York Times website has a minimalist design to ensure nothing distracts the readers from the articles. When it comes to search, here you will find a multitude of useful filtering options: by date range (with an archive allowing you to look up and read digitized articles from as early as 1851), section, and type. Naturally, the site also features sorting options by relevance, newest, and oldest content. Not only that, but users can specify whether they're looking for an article, video, image, or even a recipe.

The results page also shows the name of the content author, which adds a little bit of extra expertise to it. Another thing to note is that after the search is done, users will be prompted to leave feedback and rate their experience so that this old-timer can continue to improve.

[fs-toc-omit]A final word

Every content-rich site requires implementing search functionality. However, it’s neither possible nor practical to include every feature in one place. While some sites benefit from a variety of filters allowing demanding users to fine-tune their search, others make do with providing just the bare minimum in order not to overwhelm their visitors.

Each type of website (be it an online store, media-sharing, or news platform) has certain features that you need to weigh carefully. When designing a site, consider your target audience, their behavior, technical limitations, site specifics, and of course, the budget. But the most important thing to keep in mind is the UI and UX. Even if your site’s search functionality is stellar from a technical standpoint, cluttered UI, obscure placing, and poor navigation will likely drive your customers to look elsewhere.