Suggestive Search - A DIY Masterclass from The Home Depot

Suggestive Search - A DIY Masterclass from The Home Depot

We all refer to it differently - "Suggestive Search""Predictive Search", "Intelligent Search", "Autocomplete" and "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:


ABOVE: Suggestive search functionality on Last.fm
[SOURCE]: Last.fm, (2015). Last.fm - Listen to free music and watch videos with the largest music catalogue online. [online] Available at: http://www.last.fm [Accessed 3 Mar. 2015].

  1. 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.

     
  2. 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, or 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.
     
  3. 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 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.

So Why is "On-Site" Search important?


ABOVE: Comparison of televisions on Costco UK's website
[SOURCE]: Costco.co.uk, (2015). Costco UK - Television. [online] Available at: http://www.costco.co.uk/view/search?sort=score&search=televisions [Accessed 3 Mar. 2015].

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 essentially, 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.

Essentially, speed and convenience are the two key reasons, on-site search is important to both a retailer, and it's 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 [crap], 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.


ABOVE: An example of a poorly designed, cluttered landing page.
[SOURCE]: SportsDirect.com, (2015). SportsDirect.com - Trainers, Football Boots, Football Shirts, Running Shoes. [online] Available at: http://www.sportsdirect.com [Accessed 3 Mar. 2015].

Consider the added benefits that on-site search can provide to those shopping "on the go" (out and about, using their smartphone or tablet), 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.

Each to their own.

I'm a "typical" bloke at the end of the day, and 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 - but that's a topic, I'll no doubt cover in more detail, as part of a future blog post.

Okay, but What's the Benefit of "Suggestive Search" then? 

So, you're all familiar with Google, right?  I'd be a little bit concerned, if you weren't.

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?  Well, it's a game Google likes to play, to show how it can read our minds, and for the books, Google wins, pretty much every time.  The more characters you type, the closer Google gets to guessing what it is, you're about to type.


ABOVE: Performing a search for "babyli" on Google, in an effort to demonstrate it's search suggestion functionality.
[SOURCE]: Google.co.uk, (2015). Google. [online] Available at: https://www.google.co.uk/#q=babyliss+curl+secret [Accessed 4 Mar. 2015].

Let's imagine for example, I wanted to use Google to search for a "Babyliss Curl Secret".

[OFF-TOPIC]: Apparently, this is some kind of hair curling device that the missus says makes "perfect curls", but which costs a staggering, £120!!!  As you can imagine, my knowledge of women's' beauty products is somewhat limited (even though I did once work for Boots), so I said to her, "What's wrong with normal hair rollers?"  You can imagine the response (pure silence) - if looks could kill though... put it this way, I'm lucky to be writing this post right now (I just hope she doesn't read this bit!)

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".  *Ding, ding, ding* - we have a winner!

In light of the above, the key benefit suggestive search offers, is the fact that it saves the user time searching.  Serving predictions, intelligently-based on the characters supplied so far, helps the user to find information faster, while typing less.

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


ABOVE: Suggestive search functionality on feelunique.com
[SOURCE]: feelunique.com, (2015). The Destination For Beauty & Cosmetics - feelunique.com. [online] Available at: http://www.feelunique.com [Accessed 4 Mar. 2015].

  • Spelling Corrections - if a user were to accidentally, misspell a search term / phrase, such as "Justin Beiber", for example (a common occurrence amongst his "teenie bopper" fan base, desperate to get their hands on his "Eau de Toilet"), 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.

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&Qtheir 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


ABOVE: The Home Depot's search input box
[SOURCE]: HomeDepot.com, (2015). Home Improvement Made Easy with New Lower Prices | Improve & Repair. [online] Available at: http://www.homedepot.com/ [Accessed 4 Mar. 2015].

The "larger than usual" size, and prominence, of the search input box featured at the top of their desktop site, suggest 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

Upon giving focus to the search input box, the placeholder text disappears, giving you free reign to supply a search term / phrase.  Given that my fiancée and I are expecting our first baby, in less than 20 weeks (it's flying by!), I really ought to start getting cracking with decorating the soon-to-be nursery.  So be it, let's find some paint!  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:


ABOVE: A search for "pa" on HomeDepot.com
[SOURCE]: HomeDepot.com, (2015). Home Improvement Made Easy with New Lower Prices | Improve & Repair. [online] Available at: http://www.homedepot.com/ [Accessed 4 Mar. 2015].

  • 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.


ABOVE: A search for "paint" on HomeDepot.com
[SOURCE]: HomeDepot.com, (2015). Home Improvement Made Easy with New Lower Prices | Improve & Repair. [online] Available at: http://www.homedepot.com/ [Accessed 4 Mar. 2015].

Before inputting any more 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 up all of 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


ABOVE: The result of a search for "jet washer" on The Home Depot
[SOURCE]: HomeDepot.com, (2015). Home Improvement Made Easy with New Lower Prices | Improve & Repair. [online] Available at: http://www.homedepot.com/ [Accessed 4 Mar. 2015].

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 no 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.


ABOVE: The search for "jet washer" returns zero results
[SOURCE]: HomeDepot.com, (2015). The Home Depot. [online] Available at: http://www.homedepot.com/s/jet%2520washer?NCNI-5 [Accessed 4 Mar. 2015].

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 recommends.  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, how efficiently does The Home Depot's suggestive search functionality fair, across their mobile site or apps?  Does it scale down well, when viewed across smaller-screen devices?

Well, yes and no.


ABOVE: Search input box on The Home Depot's mSite
[SOURCE]: m.homedepot.com, (2015). Home Depot. [online] Available at: http://m.homedepot.com [Accessed 4 Mar. 2015].

Mobile Site - m.homedepot.com

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:


ABOVE: A search for "Pa" on The Home Depot's mSite
[SOURCE]: m.homedepot.com, (2015). Home Depot. [online] Available at: http://m.homedepot.com [Accessed 4 Mar. 2015].

  1. 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.
     
  2. 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!


ABOVE: Search for "Pa" on Home Depot's iPhone app
[SOURCE]: The Home Depot's iPhone app (2015). Home Depot. [Accessed 4 Mar. 2015].

iPhone App

Their iPhone app does however fair a little better.

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.


ABOVE: Search history on The Home Depot's iPhone app
[SOURCE]: The Home Depot's iPhone app (2015). Home Depot. [Accessed 4 Mar. 2015].

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.

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 scales down surprisingly well to mobile, albeit with a more limited offering, in comparison.  Nevertheless, it still does exactly what it says on the tin.  


ABOVE: Suggestive search functionality on nordstrom.com
[SOURCE]: Nordstrom, (2015). Nordstrom Online & In Store: Shoes, Jewelry, Clothing, Makeup, Dresses. [online] Available at: http://www.nordstrom.com [Accessed 4 Mar. 2015].

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.

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.

Joe Pendlebury AKA "The UX Chap"


Further Reading

The Future of Click & Collect

The Future of Click & Collect

Why Self-Service Checkouts Suck

Why Self-Service Checkouts Suck