Journal2009.10.24

Aligning search design with user behaviour

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:

The problems with this page extend beyond its visual design:

• taxonomic classification is good for search engines but user journeys comprise several consecutive pages just to narrow product choices
• many users quickly reverted to complex keyword searches, either specific part numbers or ambiguous "red bulb" or "fridge door"
• “Advanced Search” (personal search via a contact form) was used regularly, implying search results unsatisfactory
• search results page looked visually complex, could not be easily scan-read and required a lot of scrolling for pagination
• a "Buy" link directly from results page is optimistic and pushy
• search results cannot be re-filtered or easily amended

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.

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.

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

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.

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.

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.

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.