Journal

Aligning search design with user behaviour

How do you improve product search? Look at who your users are and what they are doing.

When it came to rebuilding the Lightbulbs Direct Ltd website in 2008, the primary aims were to get customers to products faster, and through the checkout as easily as possible. In this retrospective I will discuss the improvements we made after analysing user behaviour and grouping user journeys.

To begin, this is the original search results page from 2005:

Figure 1. Lightbulbs Direct search circa 2005
Figure 1. Lightbulbs Direct search circa 2005

The problems with this page extend beyond its visual design:

Almost importantly of all there was little feedback to the user that their search keywords had been correctly interpreted. How could they be sure that the website knew their search keywords "gls 60w" actually meant “Find me 60 Watt GLS bulbs”?

During the design phase, the user journeys through product search were the main focus of my attention, with a view to solving all of the above problems. We decided on three key entry points into product search, which matched three distinct user groups of varying levels of domain knowledge. Each group would have a search journey tailored to their specific needs, aligned closely with their observed behaviour:

1. "What [XYZ] do they stock?"

These visitors know about product types (bulb, fluorescent tube, spotlight) and they are looking for a specific item of that type. This lends itself very well to the original (albeit poorly named) "Bulb Finder" concept which is essentially a taxonomic drill-down through product categories. By displaying familiar top-level category names on the home page and in an obvious place on every page, users who are familiar with the terms can use them as their entry point.

After several levels of ever-narrowing categories choices, a product listing is displayed. The information shown in the table of products was carefully chosen so that a user can decide whether the product is the right item without having to click through to a product page. In the technical world of electronics, specifications speak louder than captions and descriptions. Nevertheless a small photograph is essential for the user's decision making process.

Figure 2. Wireframes and renders of category drill-down #large
Figure 2. Wireframes and renders of category drill-down

2. "My bulb has just blown, I need a replacement now!"

Do you know your 40W from your 60W; your pearl from your white; your Edison from your Bayonet cap? Probably not, and why should you? But imagine that your desk lamp bulb has just blown and you are holding it in your hand. There are no distinguishing marks except for a faded "60W" stamped on the clear glass. This is where the "Bulb Finder" works its magic, allowing a user to provide details up to four pieces of common information easily realised from a busted bulb: Wattage, Voltage, Cap/fitting (push-fit, screw-in) and Colour.

And instead of making this a trial-and-error process, the Bulb Finder gives live feedback as you enter the bulb details. You don't have to click "Search" and wait for a results page to tell you how many matches there are. This serves the purpose of giving the user control as to when they view the matching products. 600 items found? Maybe you want to narrow it down a bit before jumping in at the deep end. Changes a drop down. No items found? Maybe one of your choices is incorrect, or we simply don't have what you're after. Changes a drop down 12 items found? It's likely we've got what you want, take a look.

Figure 3. Changing states of the Bulb Finder #large
Figure 3. Changing states of the Bulb Finder

3. "I know exactly what I want", or "Panic! I don't know what I want at all!"

The keyword search satisfies a group of other broader, yet still distinct, users. Perhaps they've headed to the search box immediately because they don't know what "40W Phillips" scrawled on the side of their tube means; or perhaps they've been browsing a little and can't find that elusive niche item; or perhaps they know a specific manufacturer part number for a quick price comparison. Or perhaps they're simply looking for information about "energy saving" and simply don't want to be told to purchase something.

Everyone has their own mental model (consciously or unconsciously) of how a search works, and they supply their keywords accordingly. This means that building a good keyword search is incredibly difficult. When developing the keyword search we went to great length to ensure that it remained as flexible and useful as possible:

Converting keywords into technical parameters

Figure 4. Keywords can be complex technical specification
Figure 4. Keywords can be complex technical specification

Products are stored in an abstract data model similar to the entry-attribute-value pattern, allowing a product to have a specification defined by any number of attributes. However, all items have a set of default attributes comprising the four used in the Bulb Finder (Wattage, Voltage, Cap/Fitting, Colour).

The keyword search uses some complex string-parsing algorithms to translate a search phrase such as "60 WATT bc 240volt" into a product search on Wattage: 60, Cap: Bayonet, Voltage: 240. In the UI, known technical attributes are pre-selected in their respective drop downs and can easily be tweaked or removed.

Figure 5. Technical attributes are pre-selected using keyword text #large
Figure 5. Technical attributes are pre-selected using keyword text

Modifying search filters

If the user can not find what they want, the search needs to be easily repeatable by tweaking parameters. The attribute drop-downs provide technical clarity, but free-text keywords also need be addressed. Standard keywords are displayed in a familiar strip of tags from which the user can remove individual words if they are deemed to be reducing accuracy.

Figure 6. Individual words can be removed
Figure 6. Individual words can be removed

Scanning and pagination

Products are shown in a simple table, up to ten per page. The small thumbnail allows for instant recognition of more recognisable shapes/colours, and the natural-blue hyperlinked product name is an obvious call to action. Subtle zebra-striping aids scanning horizontally, while wide column spacing and consistent alignment makes vertical scanning a cinch. The total number of results is clearly labelled, and pagination is repeated at the head and foot of the table. This layout displays 2–4 more products above the 1024x768 fold compared to the previous design.

Figure 7. The full search results page and product listing #large
Figure 7. The full search results page and product listing

Summing up

With careful observation of your target audience you can design page elements that are more closely aligned with their behaviour.

By adopting this user-centred approach, the site is more useful to its users and becomes instantly more easy to use.

Comments

Aidan

▪

This is one nice article. Nick, are you interested in writing for us? Thanks

Jayce

▪

Thanks for sharing. Always good to find a real epexrt.

Prepaid Mobiel

▪

ujnbcojdl.evoo, Prepaid Mobiel, nJJOeAt, [url=http://www.prepaid-mobiel.nl/]Prepaid Mobiel[/url], nLiFnKr, http://www.prepaid-mobiel.nl/ Prepaid Mobiel, NCennkD.

Christina Hendricks

▪

bfvgrojdl.evoo, Free online disney princess games, sHAhFqn, [url=http://princessgameszone.com/]princess games[/url], GMCkmwI, http://princessgameszone.com/ Princess poppy games, mkiactV, Adult yahtzee, RvPZtte, [url=http://yahtzeezone.com/]Yahtzee handheld game[/url], ejmxCgz, http://yahtzeezone.com/ yahtzee, ZCfHOzU, Direct lender online payday loans, ViacFDn, [url=http://www.quickloan123.net/]Payday loans direct lenders no teletrack[/url], YNlkLzY, http://www.quickloan123.net/ Payday Loans, mJxEudX, Scary games list xbox, xbazKwh, [url=http://scarygameszone.com/]scary games[/url], dFLbxBt, http://scarygameszone.com/ scary games, GujYGnH, Health articles, ONHLdfx, [url=http://articlehut.com/]Articles[/url], nXZGAJJ, http://articlehut.com/ Articles, hNQpIfl, Christina Hendricks, PiqKszX, [url=http://www.christinahendricksgallery.com/]Christina rene hendricks[/url], znVbjxp, http://www.christinahendricksgallery.com/ Christina hendricks gallery, HopMOzD.

Share your thoughts