The search connects the users with their needs to what they are looking for. It is more like a conversation between the user and the app or the website. And that’s exactly why the designer always emphasis having a portal search that allows the users to find what they need to. On the other hand, once the user expresses what they are seeking to find, the search shows the set of results.

There is a reason why the searching experience has to be effortless and smooth. This is because the user is too quick to judge the app or the website’s efficiency just on the basis of the quality of search results.

There is a list of things that goes into designing the perfect UI for the search and results.

However, it’s only easy to absorb all this information if we break it down into significant chunks. Here, the blog is broken down into two key areas:

  • ESearch box design
  • EPlacement result page

While we are breaking the blog into these two aspects, the features of your website might vary. But, since we are identifying the most basic aspects, it will set well with various types of the website or app’s search.

But how about we start the blog with the central question, when do you need to search.

When Do You Need To Have A Search?

When you should or should not have a search on your site entirely depends on the amount of content in it. For instance, smaller websites are better off without a search option because everything that a user is looking for is already in front of them. In most case, smaller websites have fewer webpages, often fewer than 100-200 pages, that eliminates the need to have a search.

However, it’s a different ball game altogether if the user lands on a large website with multiple products and several web pages. In this case, it’s convenient for the user to just type the product in the search box and find it right away instead of surfing every page.

For larger websites, search is an integral part of the UI and should not be compromised.

Search is also essential on sites that have a service through information delivery, such as news portals. Sites that book flights and comprise vacation deals call a need for a search too.

Search Box Design

A search box comprises the input field and the submit button. While you might think that this is just two elements and hence doesn’t need any design, on the contrary, it is crucial.

On content-heavy websites, the search box design is of great importance. In fact, a poorly designed search box can prove to be deadly for the business since it is the passageway for the user to find what they are looking for.

Here is a list of things concerning the search box design:

Displaying Search Field Prominently

First things first, you need to make an observable search design box, especially when it is a significant aspect of your website for fast discovery of information required from the website.

But, if you hide the search somewhere behind the icon, it will have a negative impact:

  • EA less noticeable search feature
  • EDelayed process of finding what the users are looking for
  • EAn increase in the cost of interaction

Using A Magnifying Glass Icon For The Search Bar Option

Some icons are considered standard for their purposes. While you might want to change the icon and bring something rather unique, there are chances you might fail for obvious reasons. Ideally, you stick to what users are already used to. The magnifying glass icon is known as a “search option.”

Secret tip: The less complicated an icon, the easier it would be for the users to identify.

Choosing The Right Position For Placing A Search Box

Where to put the search box?

The answer to this question is pretty debatable. Considering the popular websites and apps like YouTube, Amazon IMDB, and Best Buy, then they have always preferred to keep the search icon top front. Again, which side of the webpage is another question, but, here some tools can help to be pretty useful.

Heat maps and the eye-tracking tool allow you to study into user’s activity and, hence, make an informed decision regarding such placing of the tools.

Secret tip: Never place a search box at an unexpected place. This will result in much more extra effort from the user’s end and will contribute to the increasing bounce rate as well.

Have A Search Button For The Search Box

In the usual case, the search button completes the action when the “Enter” button is hit. However, some users still seek a traditional way of using the search option by hitting the “submit” button to complete the action.

Since a good user interface is all about providing users what they want and make their experience smooth, why not give them what they need? A submit button, too! This might add an extra step to trigger the action, but at least the user is pleased. Isn’t that what we need?

However, make sure that submit button is large enough that it’s easier to spot and click. Also, ensure that there aren’t any keyboard accessibility issues.

Make Obvious What Users Can Search For

While we are at it, talking about how making tidbits of changes can improve the user interface, let’s talk about how and where you should be giving a sample search for your users.

It is a good approach to guide the users at every step, let alone at a search box option. Sample search can help in informing that a search box can be used for multiple criteria.
However, make use of limited words when using the placeholder text.

As per W3C, assistive technologies don’t support placeholder text. Moreover, they might even create accessibility issues, as mentioned by Mike Madaio. Therefore, while placing the placeholder text, ensure that they meet the universally accepted guidelines for accessibility.

Make Search Box Visible On Every Page

Search box option should be available on every page, and the users should be able to access it whenever they seem to navigate their way to what they are looking for.

According to a UX Booth article, Tucker FitzGerald stated that users should be given an option of the search box on every page.

A search bar becomes essential for dead-end pages such as 404, so the users can make their way out.

Have An Auto-Suggesting Mechanism

Auto-suggestion tool comes in handy for many reasons. Firstly, it reduces the need for the users to type the whole thing. Secondly, the speed of the process of data entry and helps the user reaching the result page quickly. Lastly, it assists the typical users in guiding their way through the search query.

Some useful tips on how to make the most out of the auto-suggesting tool:

  • ECombine the auto-suggestion tool with auto-correct and predictive text tools to improve efficiency.
  • EDo not show more than 10 items in suggestions, or else the information will become overwhelming.
  • EEnsure keyboard accessibility for the navigation to move up and down the list. The Esc key should enable the user to exit.
  • EMake sure to have an obvious difference between suggestive and inputted information.
  • EAdding pictures to the list of items enhances the user experience.

Part 2: Results pages coming soon

Have a project in mind?

If you have a website, mobile or web app idea in mind, or you just need some advice about product design, feel free to contact me directly.