How to Design a Search Page That Goes Above and Beyond

mart49-11When bouncing around the interwebs accomplishing the various tasks of my day, I am often confronted with a strange disparity. I’ll stumble across a competently or even beautifully designed site, but when I attempt to use it’s search function I find that the search results page hasn’t been given the kind of love and attention that the main pages or posts of the site have.

This is a major missed opportunity. The person who lands on your search page has already decided that your site is one worth delving deeper into, and to make the process of finding the info they are looking for difficult or unattractive is to take a prime lead-gen opportunity and squander it.

How do you take a generic search results page and make it sparkle? Stick around and I’ll give you a few pointers!

First Things First

Before we get into the design of our actual search results page, let’s talk about the actual search field on your site. You know, the little box with a small magnifying box that you type your search query into. The search field delivers the first impression of search for your site, and so it is important to make it as attractive and functional as possible.

You’re going to want to keep it at or near the top of the page, because that is where people expect to find it. If you bury it in the footer, or some other non-obvious place, people will be frustrated by having to (heh) search for their search. If searching is the primary action you want people to take, then make it even more prominent, centered directly in the hero of your home page.

Make sure that the field includes an appropriate prompt. If you have a site where people would be searching for different breeds of cats, rather than have the prompt be something generic like “Search Here” you could make it “What would you like to pet?” or “Search by Breed”.

If your site contains a vast amount of searchable information, it can be a good idea to build in some kind of autocomplete feature, which will aid the visitor in their search by suggesting topics, and also make the process of searching swifter.

And The Results Are…

Now that we’ve handled the search field, we can move on to the actual results page. One of the first mistakes I often see on a results page is the omission of the actual term that was being searched for. Don’t do this! It is important to remind people what exact search it was that produced the results they are looking at, otherwise things get confusing pretty quickly, and tweaking search queries becomes more difficult.

If your site has A LOT of thing to search through, consider providing a results page that contains filters to narrow the results of the search. Using our cat breed example from earlier, you could let people filter by breed, gender, age, cuteness, etc., and then sort those filtered results alphabetically, age (oldest to youngest or vice versa) or many other ways.

Make sure your search page also contains the number of results returned and clear pagination of those results. People need to know if they will be endlessly clicking next in order to see all results or if they will be quickly.

Finally, make sure the results contain all the info necessary to make a good selection. If you have a blog, make sure the results contain not just the title, but the excerpt and featured image, as well as relevant meta-information like date published and author. If you have an e-commerce site, make sure results contain product description, image, rating, price and any other relevant data.

The Nothing!

Even when I find sites that have paid attention to their search results page, I sometimes discover that those sites have neglected to do anything about what happens when no results are returned, even to the point of returning a blank page! Don’t do this!

Right off the bat, have a direct and friendly message explaining that there are no results for the query. Again, make sure the term searched for is displayed, so people can correct any type or tweak their query. In fact, you could go a step further and detect misspellings yourself and suggest results that would have returned for those corrected queries. Even if the lack of results wasn’t the fault of a spelling error, you could suggest results from similar searches, or provide a list of popular searches on your site.  Just remember to be very clear that the alternate results you are displaying are NOT for the original query.

And that’s it! Follow these tips above, and you can be sure that your search results page will be a boon that helps guide people through your site, and not an obstacle that delays them. Want a search page that delivers? Give the web team at Solamar a shout.

Want blog updates sent to you like magic?

Just enter your email below.

Leave a Reply

Your email address will not be published. Required fields are marked *