Ryan Kenney

Consultant, Experience Design

Best Practices for Implementing Site Search on your Web or Mobile Site.

Consultant, Experience Design

A few months back I heard a woman say something that was surprising and commonsense.  She said, “The Internet is really incredible, you know, you have all that information right there.” Her statement made me think.

Since colonial times, public libraries have given regular citizens access to free information. Organizing that information has become a science in itself. Think how easy it is using the Dewey Decimal system to find the answer to a burning question in a library filled with thousands of books.

Now, more than 250 years later, there are endless supplies of information out there waiting for us and sophisticated technology to help us access it. Why then do I have a hard time finding a particular back issue of Rolling Stone Magazine?  In this age of high technology and endless information, why can't I find what I’m looking for – even on a single website?

Site Search Location and Design

As mobile and web site designers, our job is to help people find what they are looking for. We can do this by making the information on a site as easy as possible to find, recognize and understand.

The most basic item for finding information on the web is the search field. On a content rich site, the search box is the most frequently used item so we need to treat it accordingly.

Someone once said to me, “You wouldn’t build a door with the handle four inches higher because it looks good.” When it comes to this important item on your site, place it where people will look first.

Users generally scan pages in an F-shaped pattern,[1] so placing a site search box and button in the top left or right corner of your page will ensure that it is seen. Since you cannot predict when users will feel lost on your site, place the site search in a consistent location on each page,[2] so users instantly know where to turn when they become lost.

Eye Scan Patterns for optimizing site design

Once you have found the right location for the search function, design it as an input field and button to show users they can interact with the field then click to search. Make the field long enough so the user has enough space to type and see the text they’ve put in. You may also want to put in some sample text by default (that will disappear once the user put their information in) to give the user an idea of what type of information they can search for. Consider styling the sample text with the same color and treatment of your text links to indicate to the user that the information is interactive.

The submit button for your site search should look like a button[3] and fit the overall design of the page – but shouldn’t look the same as any other button on your site; its functionality is unique. Be creative but remember the most important thing is for the user to know where to click. Make sure your search button is labeled in an obvious way (“search” or “find” as opposed to “go” (where?) or “submit”).

Some added functionality that can help a user with their search is a spell check or autocorrect function. This way, if a user misspells a complicated product name or subject, they will not become instantly frustrated and leave your site. Another strategy is to provide the user with “similar” results so they can find what they were looking for under similar words that appear on your site.[4]

Site Search Results

Once you have user engaged in your site’s search functionality, it is imperative that you do not lose them here. Users who engage in your site’s search function and do not find what they are looking for on their first pass are 50% likely to stop searching and leave your site. What makes the stakes even higher is that users frequently determine the credibility and value of a site based on a single search so, it doesn’t matter how important or relevant your site’s information is, if no one can find it, it is useless to the user. [5]

Give the user a results page that is easy to understand. A few guidelines will help your users easily comprehend and find the results they're looking for. Make the results titles larger than other text, perhaps bold, and style them as links[6] so users know they’re clickable. Bold the searched words in the results so the user can see where the words they typed in the input area are found.[7] Also provide a clickable URL or link under every result. Give the URLs a visited state so users can see what results they’ve already looked at.

Another good practice is to provide the user with the search box and button on the top and bottom of the results page so they can modify their search at any time.[8] Allow the user to see the number of pages their search returned. Make sure they can see what page of results they are currently on. Make the page numbers clickable so the user can skip pages if they wish.

The usability of your search function can determine the success of your site. We’ve compiled the wealth of knowledge found in a library into a convenient screen, but if the user cannot find that information, they will move onto a better-designed site. As designers, we sometimes get caught up in the raw aesthetics of a page. But we need to remember that even a site with the most dynamic and fun design can fail if it does not deliver a user with the information they came to the site looking for.

Get Videos from The SMAC Stack - Social, Mobile, analytics and cloud