Search Autocomplete: A DIY Masterclass in Site Search from The Home Depot

We all refer to it differently — “Suggestive Search”, “Predictive Search”, “Intelligent Search”, “Search Autocomplete” and “Search Autosuggest”. Whatever your preference, the fact of the matter is that this is a very important feature of any e-commerce site — primarily, in helping users to quickly and easily find what they are looking for.


Routes to a Product Page

When browsing a e-commerce site, there are numerous different journeys a user can make, through to a product page. The route taken, can be influenced by a number of factors, a few of which, are listed below:

Suggestive search functionality on Last.fm
  • The prominence and recognisability of the site’s key navigational cues.
    There are standard navigation patterns that retailers will often follow, as users have grown to expect the placement (and for some, the design of such navigational mechanisms) to be consistent across the majority of the sites they use.
  • The page the user first lands on, when arriving to the site.
    Don’t assume it’s going to always be the home page, particularly if they’re being referred from a Search Engine Results Page (SERP), a paid ad, a referral from a Facebook post, tweet, or a link on another site, for example. The retailer should be making it as easy as possible to reach a product page (in as few clicks / taps, as possible), from any given page on their site.
  • The site’s underlying architecture, and the number of clicks / taps it takes to reach a product page, from any other given page on the site.
    Remember, the user may already have an awareness of this, having visited the site previously. If they were frustrated with the “barriers” they were faced with in reaching a product page before, chances are, they’ll look for an alternate route, next time round. The same rules applies, if the user had an equally bad experience on a similar website.

Why is “On-Site” Search important?

On-site search is a staple of any e-commerce site nowadays, or at least it should be. For those unfamiliar with the term, “On-Site Search” — it’s exactly as the name suggests — the ability to search a website, for a specific piece of content. In the case of an e-commerce site, the main reason a user would be performing a search, is to find either:

  1. A product that they have already researched (be it in-store, online, or both), and definitely know they want to buy; or,
  2. A product in a specific category (such as ‘Televisions’), which they firstly want to research, and compare with other products in that same category, before deciding which to purchase.
Comparison of televisions on Costco UK’s website

Essentially, speed and convenience are the two key reasons, on-site search is important to both a retailer, and its target audience.

Many users, like myself, don’t like the experience of being bamboozled by marketing gimmicks and tat, often portrayed in the form of poorly designed (and poorly converting) departmental and product category landing pages. On-site search functionality, provides us with the benefit of being able to bypass this, thereby directing us through to what we hope, will be a less-cluttered, search results page. In turn, we can then focus on the task we initially set out to achieve i.e. point 1 or 2, as listed above.

An example of a poorly designed, cluttered landing page — SportsDirect.com

Consider the added benefits that on-site search can provide to those shopping “on the go”, or who are simply too busy, to be able to browse at their own leisure — think busy Mums, workers shopping on their lunch hour, etc. You’ll then begin to gauge a better understanding as to how sizeable a percentage of users, may be taking advantage of this functionality.

It’s important to also mention that there are those who prefer to “window shop” at their leisure, using the in-page navigational cues and conducting their journeys to product page, via departmental and category landing pages.

Just like shopping in a brick and mortar store, I tend to know exactly what I want before I go there — I like to research first. On the odd occasion when I don’t, I want to be able to find something, quickly and easily, with a minimal amount of effort required on my part. That’s why on-site search works best for me.

With that said, do make sure you have an awareness of how to cater for your users’ varying browsing habits. Tools like Google Analytics, are a great starting point for learning more about the journeys customers make through your site or app.

What’s the Benefit of “Suggestive Search”?

Ever noticed how, when you start typing your search in Google, a list box appears beneath, which almost acts as if it’s trying to predict, what you’re about to type? That’s Google’s take on suggestive search, in a nutshell. The more characters you supply, the more accurate the suggestion to what it is you’re intent on searching for.

Let’s imagine for example, I wanted to use Google to search for a “Babyliss Curl Secret”.

Performing a search for “babyli” on Google, in an effort to demonstrate it’s search suggestion functionality.

If I were to type, “Ba” for example, Google’s first guess is that I’m looking to search for, “Barclays” or”Bank”. Type, another two characters, “Baby”, and Google’s now suggested, “Baby names” and “Babyliss”- it’s getting closer! Two more characters (6 now in total), “Babyli”, and there we have it, it’s suggested both, “Babyliss” and “Babyliss Curl Secret”.

In light of the above example, suggestive search saves the user time searching. Serving predictions, intelligently-based on the characters supplied so far, helps the user to find information faster, while inputting fewer characters.

Some online retailers have further enhanced their suggestive search offering, by providing additional features, such as:

Suggestive search functionality on feelunique.com
  • Spelling Corrections — if a user were to accidentally, misspell a search term / phrase, such as “Justin Beiber”, for example (a likely occurrence), the error would automatically be corrected (without user intervention), ahead of the search being initiated. Sometimes though, this can be very annoying, particularly, if you know you have spelt the word correctly, but it’s still trying to “autocorrect” it. Think about brands / product names like, “Kool-Aid”, “Nesquik”and “Cadbury’s Creme Egg”. To combat this, some retailers, will intelligently provide “Did you mean?”-type suggestions, which you can choose to ignore, if you are absolutely positive, you have spelt the search term / phrase correctly. Foot Locker’s European website is a good example.
  • Recent Searches — as well as providing suggestions based on your input, this nifty addition, will also remember the last x number of searches you performed — generally, where I’ve seen this facility, it remembers the last 5. Again, this is another feature that contributes to the speed and convenience of on-site search. Check out Office Depot, for reference.
  • “In Department / Category” Suggestions — taking the concept of suggestive search a step further, some e-commerce sites, provide suggestions across multiple departments or product categories. As you start supplying the first 4 characters of the word “Plate” (i.e. “Plat”) on Target.com, “Plates” is returned as a suggestion; however, nested under that suggestion is the option, to search, “in home”or “in party supplies & holidays”, thereby helping you narrow your search further still, before you reach the search results page.
  • Enhanced Product Information — a growing trend amongst online retailers with suggestive search capabilities, is the introduction of product-specific information, integrated into the suggestion itself — such as a product thumbnail, product information and price. The benefit to this, is that it bypasses the search results page, directing you straight through to the product page, which is great if you know exactly what you want. It is however a disadvantage for those looking to research and compare products in the same category. Try searching for “Moisturiser” on both feelunique.com and Benefit Cosmetics’ websites.

Suggestive Search Case Study: The Home Depot

For those of you not familiar with The Home Depot, the best way to describe them, is to think of them as the US-equivalent of B&Q — their branding and merchandising are almost identical too.

The reason I love The Home Depot’s suggestive search functionality, is because it combines everything discussed above, including the additional feature enhancements.

Initial Appearance

The Home Depot’s search input box

The larger than usual size and prominence of the search input box featured at the top of their desktop site, suggests to me, that on-site search is important to users of their website. Orange (a key part of their branding) is used sparingly across the home page (particularly “above the fold”), meaning that your eyes are drawn immediately to the search icon itself. Within the search input box, there is an inviting, and somewhat welcoming piece of placeholder text, which reads, “What can we help you find?”. To the left of the search input box, is a drop-down menu, allowing you to select a specific department to search within. If anything, this seems a little unnecessary / redundant, given the intelligent nature of The Home Depot’s suggestive search functionality, which we’ll move on to shortly; however, I’m sure it’s of use to some customers.

Search Input & Suggestive Search Panel

A search for “pa” on HomeDepot.com

Upon giving focus to the search input box, the placeholder text disappears, giving you free reign to supply a search term / phrase. After entering just the first two characters of the word, “Paint”, I’m already returned suggestions, including, “Patio Furniture”, “Paneling”, “Pantry Cabinet”, and wait for it… “Paint”, which just so happened to be the first suggestion in the list — perfect! Not only that, but being the first result in the list, it’s also providing additional refinement options for me to look for “Paint” in the following product categories:

  • In Paint
  • In Paint Colors & Trim
  • In Paint Roller Covers

To the right of this list of suggestions, there are further recommendations that may be of interest. Below the heading of, “Top Results for “pa””, three products are listed horizontally, each with a product thumbnail, and the corresponding product name, truncated over two lines. The first two results are representative of speakers for PA systems, whereas the third result, appears to be some sort of wallpaper, with “PA” in the product title. Clicking either the thumbnail or the product title, will direct you straight through to the corresponding product page.

Beneath these product recommendations, are four headings:

  • Category
  • Brand
  • Buying Guides
  • Community

Each heading features two links, all of which appear to relate to paint. Clicking the “Paint” link beneath the ‘Category’ heading, for example, directs you through to the “Paint” category landing page, whereas clicking the “St. Paul” link routes you through to a search results page, for all products matching the brand, “St. Paul”. The filtering options, located on the left-hand side of the page, also correctly reflect this search refinement.

A search for “paint” on HomeDepot.com

Before inputting any additional characters, it’s also worthwhile pointing out that, when you hover your cursor over the search suggestions listed, the panel docked to the right of this list (which features the product recommendations, and useful links, as outlined above), dynamically updates “on the fly”, to reflect the suggestion that’s got the focus. For example, if I were to hover over the “Paint Sprayer” suggestion, the three product recommendations, all update to reflect three paint sprayers that may be of interest to me, as do the links listed beneath the four headings described further above.

It’s simply brilliant! Not bad at all, considering I have all these options at my disposal, from entering just two characters into the search input box — “Pa”.

Speed and Performance

As you input more characters, the relevancy and accuracy of the search suggestions being returned, and the content of the adjoining the panel, improves significantly. For all the data crunching going on in the background to serve this, there is no lag or delay in the updating of this information, as far as what is presented back to the user. It’s instant — even better!

Handling of “Zero Result” Searches

The result of a search for “jet washer” on The Home Depot

Whilst it’s extremely difficult to carry out a search that will subsequently return zero results, one such search phrase, “Jet Washer”, results in a near-empty, suggestive search panel being displayed. The search term is rather oddly displayed in the left-most column of the panel, with the call-to-action, “Press Enter to View Available Products”, on the right.

Given how well-thought out the rest of the suggestive search functionality is, it seems a little odd, that little thought has been given to the handling of “zero result” searches, at this specific stage of the search process. More helpful messaging could have been displayed to the user, explicitly stating that no suggestions could be returned based on the query they entered, followed by, perhaps some hints and tips on how to refine their search input accordingly. At least then, you’re not made to feel like you’ve reached a dead-end point, with nowhere else to go.

The search for “jet washer” returns zero results

Regardless — if you were however to go ahead with your search, the results page would advise of no results being found, “We’re sorry, we found 0 matches for “jet washer””. Beneath this statement, you’re then presented with a row of items that customers purchased, along with products that The Home Depot recommend. I’m assuming this is based on the search term / phrase supplied, as in this case, I was shown two items — a Jet Pump and a Pressure Washer.

Why couldn't these recommendations have been surfaced in the suggestive search panel?

Compatibility Across Smaller-Screen Devices

It’s all being well having this functionality on their desktop site, but in light of the fact that the gap between those viewing e-commerce sites using a PC or laptop vs. a tablet device vs. a smartphone, is closer than it’s ever been before (visits from a smartphone or tablet have already overtaken that from a PC or laptop, for many retailers), how efficiently does The Home Depot’s suggestive search functionality fair, across their mobile site or apps? Does it scale down well, or is it mobile-optimised, for display across smaller-screen devices?

Well, yes and no.

Mobile Site — m.homedepot.com

Search input box on The Home Depot’s mSite

On their mobile site, the basic suggestive search functionality works fine. Like with their desktop site, the suggestions kick in after entering just two characters. The other enhancements that the desktop site boasts, such as the content-rich, product recommendations, and the supporting, “useful links”, are however omitted. That’s understandable, given the lack of screen real estate.

There are a couple of other minor issues I have with the suggestive search functionality on The Home Depot’s mobile site:

  • The number of suggestions returned — 13 in total from a search for “Pa”. On an iPhone 5S (4 inches), only the first 7 suggestions, are visible “above the fold”. You have to scroll to see the rest, which could be a little more unforgiving, on a smaller-screen phone, like a Samsung Galaxy Ace (3.5 inches). And if you’ve got a BlackBerry, I’m afraid you’ve only got yourself to blame. For me, limiting the number of suggestions to 5 would have made more sense, to avoid the unnecessary scrolling.
A search for “Pa” on The Home Depot’s mSite
  • The formatting of the list — hidden in and amongst the list, are three non-selectable headings (“Categories”, “Brands” and”Installation Services”), which are styled similarly to the suggestions themselves. These headings would stand out more if they had a keyline, either above or below. In their current form, they’re difficult to locate. The “paint in Paint” and “paint in Paint Colors & Trim” aren’t indented either, in the same way they are under the parent suggestion of, paint”, on the desktop site.

Okay, I'm nit-picking now, but a little change like this, could make a big difference. If in doubt, A/B test it!

iPhone App

Their iPhone app does however fair a little better.

Search for “Pa” on The Home Depot’s iPhone app

During testing on an iPhone 5S, as soon as I typed “Pa”, the search suggestions again kicked into play; however, unlike with the mobile site, they were confined to the height of the viewport, meaning that only 8 suggestions were returned. When the iOS keyboard is active, you’re only able to see the first 4 suggestions; however, it’s easy to dismiss — simply tap anywhere outside of the keyboard. Just be careful not to tap a suggestion in the process, otherwise it will perform a search on that particular term. Still an improvement on the mobile site though, from a UX-standpoint.

They've also stripped back the suggestive search headings previously discussed on the mobile site, presumably to eliminate the any element of scrolling within the app.

Search history on The Home Depot’s iPhone app

Like with the desktop site, the search box also retains history of your previous searches, which is useful. You can also clear your search history, with one tap.

Another notable addition to the search functionality within the app, is the ability to search by voice. This works VERY well, and really helps to enhance the overall search experience.

Conclusion

The Home Depot rules the roost, when it comes to the suggestive search experience. Their desktop offering is original (by way of design), user-friendly and very useful. This functionality is optimised surprisingly well for mobile, albeit with a more limited offering, in comparison. Nevertheless, it still does exactly what it says on the tin.

Suffice to say, if you’re looking for inspiration, ahead of introducing suggestive search functionality to your website or app, The Home Depot should be your first port of call.

Suggestive search functionality on nordstrom.com

Oh, and be sure to have a ganders at Nordstrom and NewEgg.com’s desktop sites too, both of which, are other great examples of well-designed, suggestive search experiences.


Originally written and published to www.uxchap.com on March 4th 2015, by Joe Pendlebury.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.