Elastic lists: turbo-charged faceted navigation

By Jan Srutek

You might have already thought about, or even already implemented, a faceted navigation in your product. But how about taking it to the next level?

A navigation system does exactly what it says on the tin: it helps users navigate and find their way through complex information spaces. Online navigation systems have evolved quite a bit over the last few years, and recently we have been seeing faceted navigation gaining lots of traction.

Faceted navigation is a navigation pattern that allows users to access content via multiple routes, without forcing them to follow a predetermined hierarchy of menu options.  

This navigation has been implemented on many content-driven and e-commerce sites, because it allows users to discover relevant content in a way that is meaningful to them. Faceted navigation is a great solution if your product has multiple user types with varying mental models and preferences for accessing your content. Moreover, it is useful if any given piece of content fits multiple categories (i.e. if you are using an ambiguous classification scheme).

Faceted navigation meets information visualisation

I am a big fan of information visualisation, because representing a complex dataset visually is a great way to help one understand it at a glance. It also allows users to glean insights they might not have gained if the data was presented otherwise: as text, or as a table of data. So I have been thinking whether it could be used to aid navigation.

A few days ago I saw this a navigation system called elastic lists.

It's a great idea, because it combines the strengths of a faceted navigation’s flexible discovery mechanism, with the insight-provoking qualities of an information visualisation tool.

One can immediately see the effect of activating a filter, and how the available filtering options change as one drills down to obtain a more refined content subset.

The more items there are in each category, the bigger the size of the corresponding filter’s click area. This makes the structure and ‘shape’ of the whole dataset obvious at a glance. In addition to that, colour-coding is used to visualise other characteristics of each given category. (In this tool, it shows the rising amount of Nobel prizes over the last years.)

This particular elastic lists implementation also allows overlaying the filters with tiny bar graphs, visualising time-based trends. It brings additional content characteristics into play, although it clutters the display, and makes it harder to understand.

On the plus side, the interactions are implemented in an engaging and playful way, which might prompt users to do more exploration of the content.

Overall, this looks like a powerful tool, but what about its usability?

Making elastic lists more usable

I have seen in user research that faceted navigation sometimes confuses people (especially when it is not done correctly), because they lose track of what content they are looking at. Elastic lists are slightly more complex still, and so I thought a few tips on implementing them might come handy:

  • Animate the transitions when adding or removing filters as it supports users in understanding what has happened, and what is the current view showing them
  • Show the number of total results, and clearly highlight the filters that are currently active
  • Include a key to explain what is the size and colour of the filters representing
  • Depending on the nature of your content, consider explaining whether content could fall into more than one category (thus appearing under multiple filters), as this might be initially slightly confusing
  • Lastly, when visualising datasets with unevenly distributed sizes of categories (e.g. some categories being orders of magnitude larger than others), it is a good idea to use logarithmic representations. Otherwise, the resulting representation might end up being visually unbalanced.

Should you use elastic lists?

It is always beneficial to think about new ways of facilitating online navigation and wayfinding, and trying out different approaches before settling for the most common solution. 

Elastic lists might almost be an overkill for a smaller e-commerce or marketing site targeting general public. But if you want to facilitate free exploration and break free from rigid taxonomies, this might be the solution for you.

The same holds true when dealing with a complex dataset, especially when its main categories and the number of items in them tends to change. Elastics lists could make for a really useful tool there. This implementation of elastics lists for architecture professionals is quite appropriate.

Either way, it would be interesting to undertake some user research on this design pattern.

What do you think?