Product findability is key to any e-commerce business — after all, if
customers can’t find a product, they can’t buy it. Therefore, at
Baymard Institute, we invested eight months conducting a large-scale
usability research study on the product-finding experience. We set out
to explore how users navigate, find and select products on e-commerce
websites, using the home page and category navigation.
The one-on-one usability testing was conducted following the “think
aloud” protocol, and we tested the following websites: Amazon, Best Buy,
Blue Nile, Chemist Direct, Drugstore.com, eBags, GILT, GoOutdoors,
H&M, IKEA, Macy’s, Newegg, Pixmania, Pottery Barn, REI, Tesco,
Toys’R’Us, The Entertainer, and Zappos. The pages and design elements
that we tested include the home page, category navigation,
subcategories, and product lists.
Throughout the test sessions, the subjects would repeatedly abandon
websites because they were unable to find the products they were looking
for. Indeed,
the subjects encountered over 900 usability-related problems,
despite the websites having been built for multi-million dollars. All
of these usability issues have been distilled into 79 concise guidelines
in a report titled “Homepage & Category Usability.” In this
article, we’ll go over seven of the guidelines.
1. Don’t Make Parent Categories Shallow. (Also, Have Parent Categories.)
Issue observed: When the hierarchy of categories is
just labels and headers, it breaks the expectations of users and forces
them into narrower sections than they desire, preventing explorative
product browsing.
Grouping subcategory options in drop-down menus and other areas is a
vital part of making them both manageable and scannable; and most
websites have done so. Surprisingly, though, on many of the websites
tested, the top level of the drop-down categories was only text labels,
not actual clickable elements. This conflicted with the expectations of
the majority of the test subjects, who anticipated that the headers
would be clickable.
The Pottery Barn website (larger view).
“I’d think that you can click all of it,” said a subject of Pottery
Barn’s website (above left) when looking at the drop-down menu, “and
that the black items will take me to a general page with all ‘Living
room’ items.” Alas, upon hovering over the black heading, the mouse
cursor changed to a text-selector rather than a pointing hand, and the
subject concluded that it wasn’t clickable after all. The same type of
shallow parent headings was found on REI’s website (above right).
Most subjects expected that these headings would be clickable and
often tried clicking them, despite the cursor indicating unclickability.
The subjects wanted to keep a fairly broad scope of products, in the
hope of landing on a page that displays a curated set of subcategories
that would assist them in selecting a more defined scope (as opposed to a
page listing products).
Making parent categories a part of the product hierarchy
(and not just be shallow text labels) is critical in supporting
explorative product browsing, so that users who haven’t fully decided
what they want or who are looking for inspiration on what to purchase
can dip their toes in broader categories before diving into narrowly
defined ones.
Pixmania.com (left) and Amazon.com (right). (larger view)
On Pixmania’s website (above left), a subject tried to select the
generic “Digital Cameras” category, instead of specific camera types. He
didn’t want to specify a camera type subcategory yet because he was
still unsure about the exact differences and hadn’t decided on his
particular needs. On Amazon (above right), another subject hovered over
“Shop by Department” and tried to click ”Movies, Music & Games,”
which is orange when hovered over (Amazon’s hover style for links in the
drop-down menu is orange and underlined), but nothing happened. She
tried again before realizing that she had to choose one of the
subcategories on the left.
On websites in which headings are actually selectable parent
categories (i.e. part of the website’s taxonomy), the subjects often
ended up relying on them for an initial overview of an entire category,
and from there made informed decisions about which subcategories to
select.
Larger view
This critical guideline isn’t limited to drop-down menus, but applies
to any representation of a hierarchy of categories. Examples would be
the categories displayed in the sidebar or in the site map of a product
catalog, as well as permanently visible main navigation bar options
(i.e. very top-level categories). In all of these cases, a parent
category should exist and be selectable, as opposed to being a shallow
text label.
2. Put The Same Subcategory Within Multiple Main Categories When Necessary.
Issue observed: When a subcategory could logically appear in multiple parent categories but appears only in one, users are often led astray.
Depending on your product catalog, you might end up with
subcategories that users would expect to find in multiple parent
categories. For example, users might look for a coffee table in both the
“Living Room” and “Tables” sections, as well as in the “Accessories”
subcategory of “Sofas.”
While the ideal solution is to craft a completely unambiguous set of
top-level categories, this is not always realistic, and sometimes
popular demand requires a fuzzy category to be introduced in the
top-level categories. Therefore, to
avoid the severe usability problem of users not being able find a subcategory
where they expect (which often lead subjects to conclude that the store
simply doesn’t carry the item), consider putting the subcategory in
multiple parent categories.
BestBuy.com (larger view)
One subject was unsure whether she would find computer adapters in
“Office” or “Computers & Tablets,” because the former describes a
usage context, while the latter describes the type of product. Based on
the subcategory options, she found the latter to be the correct one.
However, in “Computers & Tablets” (above right), she was in doubt
about whether to look in “Batteries & Power” or in the generic
“Accessories.” Luckily, both led her to adapters. Also, notice how Best
Buy has an “Ink & Toner” category within “Computers & Tablets,”
as well as a “Printer Ink & Toner” category within “Office,”
allowing users to find the category in any of the potentially matching
parent categories.
Larger view
Consider the “Office” category in the Best Buy example above. All of
its subcategories could be in other top-level categories, yet the
“Office” section is presumably still needed to support the large portion
of Best Buy’s customers who shop with a “home versus work” mindset. In
these instances, featuring very important subcategories within multiple
parent sections would be relevant (assuming that they semantically fit
them equally well) because users will look in the one that best fits
their context.
In terms of implementation, there are
two main approaches to featuring the same subcategory in multiple parent categories. Our tests showed no conclusive evidence for one method over another. Each has its advantages and disadvantages:
- You could put the subcategory in one place in the website’s
taxonomy, and then simply link to that destination in the other parent
categories (for example, in the drop-down menu). The user would then
jump scope to the “real” category, regardless of where they access it
from. This could cause confusion if the user knows they have clicked a
link in a menu named “Office” but then landed in the “Electronics”
section (as indicated by the breadcrumbs).
- Alternatively, you could duplicate the categories so that each is a
unique entry in the website’s hierarchy, with proper breadcrumb paths,
etc. The downside here is technical complexity. Products must be tagged
consistently across multiple duplicated subcategories; the search
engine’s auto-suggestions must not suggest any one category more than
once in a single search; and so on. Furthermore, implementing this
requires canonical pages to be set up in order to avoid SEO penalties
for the duplicate pages.
3. Consider Having A “What’s New” Category Or Filter.
Issue observed: Some users want to see what’s new in
your store — say, to be inspired or when buying for a friend — without
having to plow through previously browsed products.
“H&M is one of the websites that I check from time to time,” a
test subject explained, “so I might pick ‘New Arrivals,’ like this, and
see what new stuff they have.” Many subjects who had experience with a
website or brand that we tested would look for a “What’s New” category.
This was especially true if they cared deeply about the products and
brand and already had
a good idea of the product catalog and, thus, wanted to check out what had arrived since their previous visit.
Clearly, a “What’s New” filter-based category is a great way to
support return visitors, so that they can easily identify what new
products have arrived since their last visit. But there are other use
cases for “What’s New.”
“New Arrivals” is particularly meaningful in seasonal industries,
where the newness factor could be a major part of the purchasing
decision. (larger view)
In seasonal industries, such as clothing and groceries, “What’s New”
helps users to see what’s currently fresh and in season. “What’s New”
shouldn’t be taken too literally. For example, fresh figs aren’t exactly
new because they are in stores every year, but they are new to stores
around summertime, and most users would expect to find them in a “What’s
New” type of section, regardless of whether they are technically new
(for example, the SKU might be the same). Indeed, the category or filter
shouldn’t necessarily be called “What’s New”; depending on the product
type, a label such as “New Arrivals” or “In Season” might be more
appropriate.
Unsure of what to buy for an eight-year-old nephew, a subject
decided to open the “New” category because “kids often want the latest
thing.” (larger view)
Some gift-buyers want to see new releases to buy something
interesting and novel. The recentness of a product also lowers the
chance that the gift recipient already owns the product, which is
particularly important when the buyer doesn’t know the recipient well.
Making “What’s New” a filter, rather than a separate site-wide
category, is often a good idea, so that users can see new items within
sections. This works well in several cases: for repeat visitors who want
to check only the new items in a particular category; in seasonal
industries where a user is interested only in what’s in season in a
particular section, such as “Fruits”; and, last but not least, for
gift-buyers who need to pick a section that’s relevant to the recipient
before considering how to find the best item in that section.
“What’s New” can be integrated as an option in the filtering tools or
as part of the category navigation (even if it’s actually a filter
that’s presented as a subcategory). During testing, the subjects
responded well to seeing it in both the filtering tools and in the
category navigation of websites in seasonal industries. But they can
clutter up category navigation quickly if not implemented carefully
(i.e. if the options are not progressively disclosed as categories are
selected). In industries in which newness isn’t as important, a
filtering option would probably suffice.
4. Suggest Both Alternative And Supplementary Products On Product Pages.
Issue observed: Alternatives, substitutes, add-ons
and accessories to the product that the user is currently viewing are
unreasonably difficult to find without good upselling and cross-selling
on the product page.
Upselling and cross-selling is great for business. And, when
implemented appropriately, they can be great for usability, too.
Suggesting supplementary products is great for users who are looking for
add-ons or accessories to the product they are viewing, while
suggesting similar products is great for users who are searching for
alternatives or substitutes.
Larger view
“It’s like when you look for movies online. If I liked this one, then
I might also like these. That’s pretty smart,” a subject explained when
stumbling upon the “Similar Diamonds to Consider” on the product page
for Blue Nile shown above. Suggesting substitute products is an
effective way to keep the user on product pages that don’t match their
criteria.
If the user arrives on a product page that turns out not to match
their criteria, they will either give up and abandon or look for
alternatives or substitutes. L
uckily, most users are patient in the beginning
and opt for the latter, but they will quickly grow tired if the only
way to browse alternatives is to go back to the overview list of
products.
This is where suggesting similar products helps. By listing
alternatives and substitutes directly on the product page, the user can
go directly from one product to the next. This much richer display of
information about the product keeps the user engaged on the page and
close to the “Add to Cart” button and checkout process.
Good suggestions of similar products also help the user find
alternatives or substitutes across the website’s entire product
catalog, not only easing the browsing experience but also enhancing
product findability (and enabling cross-sectional navigation via
breadcrumbs).
Larger view
“Sometimes they have some looks or some ideas, or something,” a
subject explained after scrolling to the end of the product page on Gilt
shown above. While the “May We Suggest” suggestions are great, the
subject had already found a dress (on the product page she was currently
on) and wanted to complete her outfit with a pair of shoes to go with
the dress. Unfortunately, Gilt offered only alternative products (i.e.
other dresses) and not add-ons or accessories (shoes, jewelry, makeup,
etc.).
While suggestions for similar products are great, they often aren’t enough.
Users will often want suggestions of add-ons and accessories,
too. After deciding to purchase a product, some users will want to buy
additional — supplementary — products along with it, to “complete the
look” or “finish the package.” A user buying a camera is likely to want a
case for it. Yet finding such supplementary products is often a hassle.
Even if the website has a subcategory for accessories, the user would
have to go back to the product list, select the subcategory and apply
the right compatibility filters (which works only for category browsing,
not search).
With a list of add-ons and accessories directly on the product page,
the user would easily be able to find products to supplement their
purchase. Much like suggestions for similar products, suggestions for
supplementary products ease the user’s browsing experience, enhance
product findability, and — to a great extent — enable cross-sectional
navigation. Not to mention its obvious business appeal.
Larger view
“When they say ‘Recommended for you,’ I assume they will fit,” a
subject explained, referring to the camera cases displayed after adding a
Nikon Coolpix pocket camera to his cart on Tesco (above). It turned out
that one of the two recommended cases didn’t fit the camera.
When suggesting supplementary products, label them appropriately if
compatibility is an issue in your industry. Many of the subjects assumed
that any accessories suggested would be compatible with the product
they were viewing or had just added to their cart. Only when the
suggested products were explicitly labeled as being based on the
behavior of other users (for example, “Other customers also bought”) did
the subjects not assume them to be compatible.
Be careful in labelling behavior-based suggestions
for supplementary products as “recommended” if you can’t guarantee
their compatibility with the product they are being suggested to
complement.
Larger view
“Something which is similar that other customers visited or bought,” a
subject mumbled to himself when glancing over the sidebar shown above.
Tesco helps its users find both alternative and supplementary products
by including lists of both “Others bought these alternatives” and
“Customers who bought this also bought” in the sidebar of its product
pages. (And unlike on its shopping-cart page, Tesco gets the labeling
right here by clearly indicating that the lists are based on the
behavior of other customers.)
Given that users want suggestions for both similar and supplementary
products, implementing both on product pages is recommended. The lists
don’t have to be located near each other, although they could be, as
long as they aren’t mixed. The subjects responded poorly when the
criteria or theme of the product suggestions was not clear. Therefore,
keep suggestions for similar products and supplementary products in
distinct groups, but be sure to have both.
While basing these suggestions on the behavior of other users can be
effective, exercise care. Tesco’s suggestions for supplementary products
consisted entirely of memory cards, even though many other relevant
add-ons and accessories are obvious, such as cases, lenses and
batteries. So, either manually curate the suggestions or have the system
generate them based on a broad range of factors, so that a diverse set
of complementary product types is shown.
5. List “Recently Viewed Items.”
Issue observed: Refinding a previously visited
product becomes needlessly complex when the user has to rely on the
browser’s native “Back” button or has to renavigate the categories or
reuse search.
During testing, subjects often wanted to return to a previously
visited item — sometimes to check whether certain features of the
previous item were compatible with the new one, other times to compare
two products before deciding on one to purchase, and still other times
to return to a certain product scope from where they could use the
breadcrumbs to climb back up the category hierarchy.
Whatever the reason, the subjects simply wanted to refind a
previously viewed product. Yet, on websites without a “Recently viewed
items” feature, the only ways to do this were through repeated clicking
of the browser’s “Back” button (an option that occurred only to some
subjects) or by searching for it or plowing through the product
categories once again.
Larger view
When looking for a camera case on Pixmania (above), this subject
realized that he needed the name of the camera he chose. He went back to
the product page using the browser’s “Back” button, then reopened the
drop-down menu, then opened the “Camera Cases” subcategory in a new tab.
A list of “Recently viewed items” would have greatly simplified this
process.
A list of “Recently viewed items” typically consists of a row of
products that the user has previously visited. It is a kind of
history-based breadcrumb trail (except that it typically includes only
products, not categories or other pages). The list tends to be located
towards the bottom of the product page — sometimes even in the footer —
but is sometimes given more prominence in a sidebar.
However, the list should be available on all pages of the website
(not just the product page), because returning to a previously visited
item would be just as welcomed by users who find themselves lost on a
category page. The footer has the benefit of being out of the way most
of the time; and then when subjects wanted to change scope or refind an
item, most scrolled to the bottom of the page, likely looking for
cross-sectional navigational such as “Related Items,” and thus
discovering the “Recently viewed items” list.
Larger view
On Tesco (above), refinding a previously visited product is made easy
by the “Items you have recently viewed” list, which is integrated in
the footer on all category and product pages. Compare how easy it was
for this subject to check the camera’s dimensions with the previous
Pixmania example.
Another location for the “Recently viewed items” list is the sidebar, as seen here on Crate & Barrel. (larger view)
With this list readily available throughout the website, users are
assured that refinding products will be easy, and they are more likely
to explore other items because they know that returning to a favorite
won’t be a hassle. Combined with breadcrumbs,
users enjoy a powerful combination
that facilitates both history-based cross-sectional navigation and
section jumping. Show “Recently viewed items” to everyone, then, without
requiring users to sign in; the list should be session-based,
functioning much like a shopping cart.
Because the list is automatically generated for users, a couple of
privacy features are worth considering. While the vast majority of users
will enjoy seeing “Recently viewed items,” a few will want to hide the
items because they don’t want others to know or because they’re on a
public computer. In such cases, consider two features: “Clear all” and
“Disable list.”
6. Create Dedicated Pages That List Compatible Products.
Issue observed: Users have a difficult time finding
compatible products and verifying their compatibility when the website
doesn’t explicitly state their compatibility or link to the
corresponding products.
Finding a spare adapter for your laptop or buying a camera and
matching case might sound like trivial tasks, but during testing, it
turned out to be extremely difficult for subjects, who had a completion
rate of only 35%. This means that 65% had to give up or, worse, ended up
purchasing a product that they believed was compatible but was, in
fact, not.
Larger view
The subject above opened the camera page in a new tab, but even with
the camera’s dimensions close at hand, finding a matching case proved to
be tiresome, as he still had to open the page for the camera case, go
to the specifications, locate the dimensions, compare it to the
camera’s, and repeat this for every single case. After a few attempts he
gave up, like 65% of the subjects.
Finding compatibility-dependent accessories can be difficult, which
is why you should always suggest both alternative and supplementary
products on a product page (see guideline 5), as well as list “Recently
viewed items” (guideline 6). However, if the majority of accessories in
your industry are strictly compatible with certain other products
(regardless of whether you sell those other products), then consider
also offering whole pages listing compatible products. Technology
industries are ideal for this (due to the technical dependency between
products), whereas it would be overkill for a clothing store (all
clothes “function” together — the only “compatibility” factor is taste).
Larger view
“I’ll pick Nikon now — originally, I didn’t necessarily want one from
Nikon — but I’ll do it now hoping to find an original camera bag so I
know it will fit, because I’m not really keen on going back to find my
camera dimensions and then compare to the bags,” a test subject
explained. “So, unless it’s insanely expensive, I’ll probably take an
original.” Subjects often gave up finding a compatible case that they
liked and simply tried to find anything that would fit their camera.
Using brand filters was often a part of that strategy, although it led
some novice photographers to purchase incompatible cases, because they
assumed that most Nikon cases would fit most Nikon cameras.
When dedicating whole pages to compatible products, then the page
for, say, the “Nikon D7000 camera” would list all compatible
accessories, such as batteries, cases and lenses. Going a step further,
the page could even filter by product type, so that users can view
“compatible ‘camera cases’ for ‘Nikon D7000’.” This enables users to
navigate the product catalog vertically and to find (typically
high-profit) accessories, instilling confidence in the accessories’
compatibility.
Determining compatibility across a catalog is a major undertaking,
but with intelligent queries for each compatibility-dependent category,
a lot of the work can be automated. The benefits of determining such
compatibility are many. Besides the already mentioned ability to browse
vertically across categories, it enables you to create powerful filters.
Imagine one filter in the “Laptop Adapters & Chargers” category
that allows the user to enter their computer’s model and see compatible
chargers. Furthermore, it is also great for search engine optimization,
because these compatibility lists can be presented as permanent pages,
giving you several highly targeted and unique landing pages for each
product, such as “Lenses for Nikon D7000,” “Laptop Chargers &
Adapters for MacBook Pro” and “Covers for Kindle Paperwhite.”
When
seeing these camera bags being cross-sold in their shopping cart, the
subject above was disappointed by their looks (all black nylon). (larger view)
Had Pixmania established compatibility across its catalog, it could
have linked to a list of compatible accessories — “See all 8 compatible
cases for Canon PowerShot A2300” — at the end of this cross-selling
section, providing a direct path to a complete overview of relevant
cases.
Establishing compatibility across a catalog helps you to avoid plainly wrong matches. (larger view)
In Tesco’s shopping cart above, the subject tried to find a matching
case for the camera she had just chosen, but she completely lost faith
in the website upon seeing few related accessories and a lot of
irrelevant recommendations, including a saxophone!
Compatibility-based pages should be cross-linked with the original
product page, as well as with any “Compatible With” lists on the product
pages of compatible items. Such pages could also appear in a user’s
shopping cart and be included in the filters of all relevant accessory
categories across the website.
Besides being great for cross-selling and SEO, dedicated pages of
compatible products can be mined for data to create filters and to
improve cross-selling recommendations. They would enable you to avoid
suggesting incompatible products, which is critical because most users
will assume that any product being suggested fits.
Larger view
“It fits ‘X60,’ but that’s not mine. I have an X61,” a subject said,
referring to the top result above. He continued, “It fits all in the X60
series. Does that mean my X61 as well? I would go to Lenovo’s website
and find out.” Confusion about which models are in a “series” was
common, because a series’ name can be confused with a particular model’s
name.
Just showing a list of compatible products for each model doesn’t
always cut it because some models are organized into series as well. In
the Newegg example just above, the “Lenovo ThinkPad X61s” model is part
of the “Lenovo X60 series.” This hierarchy should be reflected in the
dedicated pages of compatible products as well, because some test
subjects mixed up a series’ name with a model’s name. Pages for
compatible products in a series should link to all models in that series
to clear up any doubts the user might have.
Lastly,
dedicated pages of compatible products can still be meaningful
even if the website doesn’t carry all of the products. For example, an
electronics store that doesn’t sell Sony digital cameras could still
have pages of compatible products for Sony cameras to help customers
find accessories that it does sell. The same goes for websites that
don’t even sell products from a given industry; for example, a website
that sells apparels or bags but not laptops or electronics might still
want to list compatible products so that users can browse only the bags
that fit their particular laptop.
7. Always Link Contextual Images Directly To The Products Shown.
Issue observed: Users quickly grow frustrated when they spot a product in a contextual image but can’t navigate to it.
“I want this. What do I do?… I want this one,” one subject said,
laughing out of despair while pointing and clicking at a coffee table
shown in a contextual image on IKEA. While inspirational images can
raise the aesthetic appeal of an e-commerce website and serve as an
important vertical style-based navigation path, not directly linking to
the products depicted in contextual images will frustrate users to no
end.
During testing, the subjects were dumbfounded that a website didn’t
simply link directly to all products depicted and that they had to hunt
them down to learn more or to purchase them. This lowered their
perception of the website, and some took it as a sign that the owners
clearly hadn’t used their own website.
Larger view
“I don’t know how I found this cushions category. I wonder why there
wasn’t a cushions category along with all the sofa options up there. But
then I saw this image of a cushion down the page and thought that maybe
I’m on the right track.” One subject said this while looking for
cushions in the sofa category on IKEA’s website. As he scrolled down the
“Sofas” subcategory page, he spotted an image containing a cushion, and
while the image was actually cross-selling sofa covers, the “Cushions”
category was linked to it as well.
Images tend to draw a lot of attention, and when
users get stuck in first attempting to find a product, they tend to scan
the page very narrowly for anything that looks like a path to the
product they want. Therefore, contextual images should always link to
the products depicted, even if the image is meant merely as inspiration
for one of the products being shown. Users will still notice the other
products in the image, especially if they are actively scanning for one
of those product types. Even if the purpose of the image isn’t to
promote that particular product, users will become frustrated if they
can see the product but not access its page.
Larger view
Above, a subject saw a table that he wanted in the thematic “Seating
Solutions” image, so he clicked it, but nothing happened. He then tried
the “Save to list” button, assuming it would save all of the products
shown and that he could then simply remove the other products. But that
didn’t happen either. “Nooo… Arrgghhh, it only added the sofa. I would
like to get the sofa table,” he said, hovering over and right-clicking
the table in the image. He laughed in despair as he continued, “I want
this. What do I do? I want this one [pointing at the table]. I expected
it would save all of them when I used the button, but it only saved the
sofa.” After searching for the table, the subject ended up abandoning
the website.
If an item is not being sold, ideally it shouldn’t be depicted at
all. In practice, this is easier said than done because contextual
images sometimes contain products that were available when the
photograph was taken but that now are not (or are not in all
distribution channels — for example, a store might sell some products
offline only, or an international website might ship certain products to
certain regions). Discarding or reshooting an entire scene of multiple
products is likely unfeasible if just one or two of the products are no
longer available.
In such cases,
replace the product link with a description,
rather than just remove it entirely (as seen in the IKEA example
above). The description could be as simple as “Discontinued,” “Available
only in store” or “Not available in US store” — the vital part is to
indicate that the user may not purchase the item. If the item has not
been discontinued but is simply unavailable for purchase in a particular
channel or region (as with IKEA above), then the description can point
very persistent customers in the right direction. Better yet, if similar
products are available, consider linking to them or to their
categories.
Larger view
In the image above on the left, one subject found the sofa in the
header image interesting and clicked it to investigate further, only to
be confused when presented with a list of products but not that
particular sofa. In the image on the right, another subject was on the
product page for a sofa. Upon inspecting the sofa images, she found that
she very much liked the coffee table as well and wanted to know more
about it. She looked around for links, but there weren’t any, not even
in the cross-selling section further down the page.
Another
way to solve this challenge is to mark up contextual images with direct
links to the products being depicted, as seen above on Crate &
Barrel, where clicking the “+” icon will open a quick preview of the
pinned product. (larger view)
Direct links are needed not only for contextual images. Header images
and even some images on product pages would benefit from having direct
links to the items being shown. For images on product pages, any
products that are clearly depicted could be linked to either right below
the image, by having a dedicated “get the look” cross-selling list, or
at the very least in a generic cross-selling section on the product
page. One could even experiment with tagging the image so that users can
actually click right on the products they are interested in.
If They Can’t Find It, They Can’t Buy It.
In a time when more and more customers are accessing e-commerce
websites through search engines and social media links that send them
deep into a website’s hierarchy, enabling users to infer their current
position in the hierarchy, to go to the generic parent category and to
find related products is critical. Even customers who use on-site search
will depend on the website’s taxonomy of categories to infer the
available range of products.
No matter how much time you spend on the aesthetics, the product
images and the optimization of landing pages, the customer’s overall
experience will falter if the foundational e-commerce elements, such as
the taxonomy of categories, aren’t solid.
Designing user-friendly category-based navigation is no easy task.
It requires a solid information architecture, systematic labelling, a
logical hierarchy, curated subcategory pages and a balanced home page
design. Obviously, all of this can’t be covered in an article like this,
but the seven guidelines we’ve looked at are low-hanging fruit; by
following them, you can quickly improve the category navigation on a
typical e-commerce website:
- Don’t make parent categories shallow.
- Put the same subcategory within multiple main categories when necessary.
- Consider having a “What’s New” category or filter.
- Suggest both alternative and supplementary products on product pages.
- List “Recently Viewed Items.”
- Create dedicated pages that list compatible products.
- Always link contextual images directly to the products shown.
One last note. During testing, it became clear that loosely executed
categories can have more devastating consequences than “just” immediate
abandonment of the website — it could permanently damage the brand. When
the subjects couldn’t find a particular product type, they would often
conclude that the website didn’t carry such items. Such fundamental
misunderstanding leads not only to an immediate loss of a sale, but to
future losses because customers won’t visit a store that they assume
does not carry the type of product they are looking for.
