Using Attributes for Navigation: The Good and the Horrible

  |  December 9, 2011   |  Comments

Some examples of attributes that shine, and some that don't.

For the last 14 years, I have done my best to extol the virtues of attributes (both product and user) as the way to really enhance the user experience. Attributes can be used in a number of different ways, from navigation to personalization to mass customization.

Using attributes to your advantage requires two important things: clean, robust metadata, and a great intuitive user interface. Today we'll look at some examples that shine, and some that don't.

First, let's talk about getting clean, normalized, and robust metadata. Where does that data come from? Most of our clients create it themselves after we do an extended working session on generating the taxonomies, ontologies, and lexicons they will use to describe and order their products and users. This is not a simple process, however, and someone must be in charge of making sure human error doesn't dirty the metadata. Some companies, like Edgenet, are meta-data creators and are in the business of selling clean, robust, and normalized meta-data to customers. (Edgenet, for instance, supplies meta-data to Google and Bing to assist in those companies' e-commerce/product page, such as the data on this page.)

Wherever the data comes from, it needs to be well-defined (the least variation necessary to cover the entire scope of current and future products), normalized (the same terms are used across the enterprise to indicate the same idea), extensible (so future products and categories can fit without destroying the ontology), and clean (so the automation acting upon the attributes is accurate).

The next step is to build an intuitive user interface that uses these attributes. Let's concentrate on a common use of attributes that comes with a well-known user interface: attribute-based filtering.

I'll start with what I consider to be good examples. Here is an example of the expandable filter capability my company built at HM.com:

h-m

After the user chooses a major category or subcategory (on the left), she has the ability to use the product attributes to further refine her view. The system is dynamic, so she selects attributes, the products reshuffle, and conflicting attributes are greyed out.

Here is a slightly more complicated, but still functional version at B&H (not a client of ours):

b-h-site

Its list of attributes is perhaps too long to be presented the way it is (it goes all the way down the left-hand side of the page), but it is functional and works.

The key here is that both of these companies understand the difference between the use of attributes for filtering and for navigation. While technically attributes are used to underlay both ideas, they need to be presented as different ideas. For example, the B&H page above allows the user to click a category to narrow results. The idea here is that the user is navigating into a subcategory. In reality, this subcategory (Notebooks, for example) is just another attribute, but it is not presented along with the rest of the "filter by" attributes.

The H&M example does something similar. Categories are displayed on the left, along with their subcategories and a "View All" link. Filter attributes, however, are reserved for the top of the page and presented differently.

Let's look at a bad example, which I discovered this weekend while looking for a new printer.

hp-site

There are so many things wrong here it's hard to even know where to start. The overall concept of the left navigation is flawed to begin with. It mixes category navigation with attributes, making it very unclear where the hierarchy is. This is much clearer on the next page after the user clicks "See All" (the last link above). We'll get to that in a moment.

Most of the issues I have with this navigation is that it is a motley selection of ideas, some of which are sub-categories and some of which are attributes that shouldn't be thought of as being on the same hierarchical level. For example, "Brand" and "Top Rated" are high-level ideas, whereas "ePrint" and "Print Apps" are less important. Because there already is a main navigation in the center of the page (and in the top nav), it is not intuitive that this left-hand section is also navigation and not a filter.

Confusing the issue more is that this area is used for product filtering on the next level down:

hp-site-2

On this page, we see all printers, and can select items in the left-hand navigation, but this time they are attributes that filter the results. If you look at the breadcrumb, I've already selected "Color LCD" and the poorly named "Yes" attribute, which was the option under one of the other attributes. I have no idea which one it was simply from looking at the fact that "Yes" is selected, and that is the point. As these are presented as navigation, it was almost shocking that one could have multiple "categories" selected at the same time.

If you look under "CD/DVD Printing," the only option (even when no other filters are selected) is "No," making this an unneeded attribute.

This page is a mess. The navigation doesn't make sense to start with, and the way it implemented attribute-based filtering compounds the problem. If this left-hand area was strictly for attribute-based filtering, there would already be enough problems to discuss. But add to that the multiple use of this area for filtering and navigation, and you have a site that is simply frustrating to use.

This is a case in which a company (HP) has the metadata they need, but has no clue how to present it to a user in an intuitive fashion. To succeed in using metadata, you need to not only start with great data, you need to understand how to use it.

Questions, comments? Leave them below.

Until next time…

Jack

ClickZ Live Toronto Twitter Canada MD Kirstine Stewart to Keynote Toronto
ClickZ Live Toronto (May 14-16) is a new event addressing the rapidly changing landscape that digital marketers face. The agenda focuses on customer engagement and attaining maximum ROI through online marketing efforts across paid, owned & earned media. Register now and save!

ABOUT THE AUTHOR

Jack Aaronson

Jack Aaronson, CEO of The Aaronson Group and corporate lecturer, is a sought-after expert on enhanced user experiences, customer conversion, retention, and loyalty. If only a small percentage of people who arrive at your home page transact with your company (and even fewer return to transact again), Jack and his company can help. He also publishes a newsletter about multichannel marketing, personalization, user experience, and other related issues. He has keynoted most major marketing conferences around the world and regularly speaks at Shop.org and other major industry shows. You can learn more about Jack through his LinkedIn profile.

COMMENTSCommenting policy

comments powered by Disqus

Get the ClickZ Analytics newsletter delivered to you. Subscribe today!

COMMENTS

UPCOMING EVENTS

Featured White Papers

ion Interactive Marketing Apps for Landing Pages White Paper

Marketing Apps for Landing Pages White Paper
Marketing apps can elevate a formulaic landing page into a highly interactive user experience. Learn how to turn your static content into exciting marketing apps.

eMarketer: Redefining Mobile-Only Users: Millions Selectively Avoid the Desktop

Redefining 'Mobile-Only' Users: Millions Selectively Avoid the Desktop
A new breed of selective mobile-only consumers has emerged. What are the demos of these users and how and where can marketers reach them?

Jobs

    • Sr. Paid Search Manager
      Sr. Paid Search Manager (Bisk Education) - TampaCurrently seeking a Sr. Paid Search Manager in Tampa, FL for Bisk Education! Bisk Education is a...
    • Contact Center Professional
      Contact Center Professional (TCC: The Contact Center) - Hunt ValleyLooking to join a workforce that prides themselves on being routine and keeping...
    • Recruitment and Team Building Ambassador
      Recruitment and Team Building Ambassador (Agora Inc.) - BaltimoreAgora, www.agora-inc.com, continues to expand! In order to meet the needs of our...