How to Design a Usable Search Function that Keeps Users Coming Back

Written by Craig Morrison - Get free updates on new posts here.

Did you know that over half of ALL web users are search dominant?

Think about the last time you went to YouTube to find something. Did you navigate its categories? Scan through your subscriptions? Nope. You searched.

Just like you searched for those Odour Eaters on Amazon, or for that foot fungus medication on eBay. Admit it, you’re a searcher, and so are your users. Also, your feet are gross.

Now, do you want over 50% of your users to have a positive searching experience every time they use your site

Bonus: Download this free eBook outlining Quick UX Fixes that Take 5 Minutes or Less to quickly improve your user experience.

Bro, Do You Even (need) Search?

According to Nielsen, the guidelines for including a search function is having over 200 pages. But, they also report that half of your users are going straight for the search button to find what they are looking for. That’s a lot.

Without search, those users are forced to use your navigation menu. This means you better be sure your content is organized properly, and your navigation menu is top notch.

Despite how much you try, a user is bound to get stuck. This is where your search box comes in. If the user can’t get to where they want to go, they fall back on search to get them there. Without search, they’ll just leave, and you may lose them for good.

Clearly there are sites where a search function would be just silly. But if you have even a small amount of content, it’s worth including a search in your product.

Location is Everything

What good is a search box if you have to search for it?

We know that users will look for the search box as soon as they run into any friction when trying to find something. You need to make sure they can easily find it.

Your search box should be on every page, and easy to find. No hiding your search in the footer. No tiny little search icon in the upper right corner.

Most sites put their search bar in the header, which is the perfect location for it. Users are comfortable with consistency across the web. If you place your search box where it is most common, it will easier for your users to find.

For example, Airbnb puts their search box in their header, right beside their logo, on every single page.

AirBnb puts their search box in their head, right beside their log on every page.

How Your Search Box Should Look

Your search box should be just that, a box. As I mentioned above, users get comfortable with consistency, both in location and visual design of elements. Don’t fix what ain’t broken.

I see a lot of people trying to “re-invent” search. For example, the blog theme I’m currently using. They put the search as an icon in the upper right corner, which opens a full screen overlay. This is awful.

It’s important to make sure the search box is wide enough to fit the things your users are typing in. The recommended width is 27 characters. Some sites go longer, just don’t go shorter.

Don’t bother with including any type of advanced search features here. A plain box with some placeholder text asking users to search is perfectly fine.

Twitter’s search box has good contrast and is always on top of the page.

Advanced Search Options

When I say don’t include advanced search features, I don’t mean exclude advanced search entirely. Make sure that only advanced users are using your advanced search.

If a regular user ends up seeing advanced features, they’ll be overwhelmed, or confused. This will end with them making a mistake (as always) and getting poor results.

Keep your advanced search options on an entirely separate page, not within the search box itself. Also, don’t link to the advanced search from just any page, put the link to advanced controls on the search results page.

Nielsen suggests using wording like “advanced” in order to intimidate basic users not to enter it. Don’t dumb down the link text by saying something like “more options”. This area isn’t for you REGULAR USERS!!

Google means business with their advanced search function.

Help with Spelling and Grammar

Don’t think this is an issue? Oh, well look at you. Mr. Prefect Speeler. I’m sorry we all can’t be YOU alright?

It’s super essential to help your more… illiterate users out. Because let’s be honest, when was the last time you typed something into Google and thought… Hmmm, am I 100% sure that’s how you spell fungicide?

This search behaviour is so engrained in users now, they expect to be corrected if they make a typo, or spell a word wrong. It’s crucial to make suggestions as to what you think your users meant to search for.

Display the results for closely related words, and inform them that results are being displayed for these terms instead.

Oh right… yes… a W… I knew that

Boolean Search – And, Or, Quotations

Using any type of booleans in your simple search box is not recommended. Studies show that hardly any users understand using booleans like OR or AND to link terms together.

For example, if a user tries to find information about both hamburgers and hot dogs, they might try typing the phrase hamburgers AND hot dogs. This would return them only pages with both hamburgers and hot dogs, but would neglect to return a page just about hamburgers.

They should have put hamburgers OR hot dogs, but they don’t know that, because they’re clueless users.

Allowing booleans in the advanced search is perfectly ok, because users on the advanced search are probably geniuses. Well, in comparison to an average user bananas are geniuses, but you get the point.

Perhaps another OR?

The Search Engine Results Page (SERP)

Your search results page (called the SERP) is a big deal. The search box itself is only as good as the results it returns, and they way it displays them.

Results can be displayed in a variety of ways, depending on how your content is formatted. But, there are some vital elements that every SERP should have.

Your search results page should contain:

  1. Your search box, at the top, with the phrase that was just searched
  2. The number of results returned
  3. A filter or sort menu for viewing results in a different priority
  4. An option to get to the advanced search page (if you have one)
  5. Large, prominent and clickable content titles
  6. Visited links in a different colour
  7. Navigation (pagination, infinite scroll, etc.)
  8. Search box again at bottom of results (if paginated)

YouTube’s search result page

What Content is Your Search Searching?

Your search should be generic. Meaning, it should search every piece of content on your site. Don’t return results only from the section the user is currently on.

Why? Because, this leaves it up to the user to guess what section the information they are searching for lives under. It’s the user!! You can’t leave anything up to them, they’ll burn the whole house down!

For example, if your user is navigating your site about shoes, attempting to find some odour eating insoles, they might head to the footwear section and search for them. Their search will return no results, because little do they know, the odour eating insoles are ACTUALLY under medical.

Always make your search return results from the entire site.

Have you put enough thought into search?

So, have you put enough thought into your own search box? Leave a comment and let me know if I have changed your mind about your own search workflow.

  • Vitaly Golovin

    Cool article, but my feet aint gross. 🙂

  • Ayal Avisar

    Great article, what is your take on Libraries based search ux? Should it be similar to google’s most common one or should it stay in the old catalog ux?