Optimizing Your Faceted Navigation

One of the most quintessential parts about designing a website that offers many different products and features is the implementation of a functional faceted navigation. As users are becoming better versed with web design, it is inevitably expected that perusing a site should include navigation features in which will help guide us to the product or service we seek.

The process of designing the perfect faceted navigation is not the easiest of things, as it takes into account different variables such as information architecture, page strategy and design. Only until you combine all of these factors together can you really begin building something to help your users.

Organizing Your IA

As eloquently defined by Jim Kalbach, the values for websites are often broken down into 5 different categories of faceted navigation.

  1. List
    As true to the name as it can be, a list is generally a navigation that details out different items. The set of values within a list-type does not have to be in any particular order nor contain subcategories. Although, if you do decide to structure with a list, it is highly recommended to organize logically in order to better aid the user in the long run.
  2. Hierarchy
    A hierarchy is typically represented in parent-child relationships. Essentially, a general category often contains sub-categories, a.k.a ‘child’ categories, which helps break down the navigation structure logically.For example,
    i) North America
    - USA
    + California
    + Nevada
    ii) South America
    iii) Europe
  3. Binary
    Binary values consist of only 2 options, an either/or filter for the user. For instance, it can be a set of values that are gender based.
  4. Continuum
    A continuum breaks down facet by giving the user a range to select from. This is typically done through numerical values such as a price range.
  5. Scale – Like a continuum, but with discrete categories
    Scale typically is defined as facets that are categorized by different scaled categories. For instance, eCommerce often utilizes this through categories with ranges like order by “Average customer review”.

Determining Your Facets

Even after you have organized your thoughts on how you would like to divide your values within the search, you will want to further organize the structure of your products and ideas. By determining your products and services beforehand, and how it corresponds to the psyche of your user, you will be better equipped to help your visitor browse your site.  To define your facets, you will want to:

Step 1: Identify main concepts within a domain

  • Look for your website’s entities: services, products, objects, ideas, people, etc…
  • Organize a list of keywords from your website, content, catalogs, interviews, etc…

Step 2: Group into logical categories

  • Determine which categories are the primary facets of the information you’re providing
  • Test your groupings by going through and checking the flow of use

Step 3: Create a relationships model

  • Show the affiliations
  • Consider navigation paths

How will your values be displayed?

You will want to think about how your actual values will be displayed for the user to interact with.

Examples of display options:

  • Links – Displaying strictly text links
  • Sliders – A slider bar that designates a range of value
  • Inputs – Offering input boxes for specific amounts
  • Value Sorting – A range group divided by a certain category

How can users see more values?

  • Inline expansion – Shows more within the navigation box through a link (i.e. “click for more…”)
  • Scrolling – Allows for scrolling through the various values
  • Pop out – Allows for pop out menus as a user go peruses
  • New page – Shows a completely different page with more values within the page
  • Pagination – Pagination numbering within the navigation

How are values removed?

  • Inline portrayal – Only shows what you selected inline in the navigation
  • Breadbox – Shows a small selection area with your selection
  • Bread crumb navigation – A visual path of what you have selected

Navigation Strategy

Once you have a comprehensive list of your ideas and how they relate to each other, you will then want to focus on the strategy behind your navigation. Your strategy will be based on both how you want your visitors to proceed through your website and what is the  most efficient way for them to get there. We’ll use Warby Parker’s website as an example of proper navigation strategy.

The opening strategy of your website consists of the initial path your user will set on to get to his/her goal. Often times this consists of how top navigation is structured. In essence, this will be the starting point in which user will engage with the faceted navigation. The top navigation is truly broken down into 2 bare essential categories: shopping and everything else. This mitigates the time a user needs to scourge the website for what they are seeking.

The sense of minimalism goes even further through offering dual binary values. In terms of shopping, you are only given two options of male or female eyewear. Once you are inside either option, it is further broken down into two choices of sunwear or optical styles.

Top navigation

The middle strategy gets even more complex as it is the strategy in which you are helping your user navigate through your services or products. This primarily composes of product listing pages and the actual faceted navigation.

You will notice that the particular orientation of the filters bar on Warby Parker’s website is located in the middle. As far as location strategy is concerned, placing it in the middle is both logical and aesthetically pleasing. For this particular stage you will want to make sure to not only combine your IA list but also make natural design implementations with your faceted navigation.

Warby parker faceted navigation

The end strategy has less to do with your actual faceted navigation and more to do with how you brought the user to a conversion. This may consist of items such as what sorts of call to actions you implemented before bringing them to the product page. Were your call to actions incorporated into the external design or did the user have to take an extra step to get to the product page?

warby parker product page

As you become more familiar with faceted navigation, you will begin to see that it is a truly vital part of any website that is offering a large amount of services or products. Without a properly optimized and thought out faceted navigation, your user will inevitably be fed up with the sea of information.

Leave a Reply