Exploring Content Filters

by:   |  Posted on

What if I suggested a new way of navigating an online information space? What if it was something we’ve all seen before but just never thought to use? I’m talking about subtracting away information the user doesn’t want.

Content filtering is a much more natural way of sorting through categories, especially when the majority of your content is under more than one subject.Think of a web page that has the game results from every sports game on earth, this may be a huge page, but it is somewhat conceivable. Some people might even call it helpful. As interaction professionals, we might start to think about ways to navigate or sort through the information on that page. At this point, some of you are likely thinking it needs to be organized and others are thinking it should just be put into a database.

If all those sports scores were organized into columns, maybe some users would be tempted to scroll down through the page. If those columns were fed into the page dynamically, they could be rearranged according to topics at the top of them. This technique has been seen before, there are many email programs that sort hundreds of emails by date, by sender or by subject. This is sometimes seen on the web as well, where some sites have columns of data that can be easily re-organized by clicking on one of the headings. But this technique is for short columns with small entries, it is not for pages of text with details, graphics, links and so on. But perhaps it could be.

Let’s go back to that page with the sports scores. Imagine the page now displays a subset of only the most popular games of the week, only the games that are the most popular, perhaps 20 entries. On this page, the navigation is based on the same sorting system as above but the headings are now displayed within pulldowns. Yes, pulldowns. OK, I know what you are thinking, this technique doesn’t require the pulldown pull down element, but it makes for an easy and quick example. Let’s get started.

Filtering pulldown menu for sportsThe user starts to navigate by sorting the results according to “Latest Games,” this gives them what they want at the top, as expected. But now the actual content on the page has changed to be more relevant. How did this happen? The site filtered out the information from the first page that wasn’t relevant and added more of the information that was requested.

How is this different from a standard navigation and structure?
Well, imagine the user is still looking at the “latest games” page that was just selected. Now, they select another category, such as “hockey,” but this time from an additional dropdown.

Now they have the information sorted into a new topic, one that is a combination of the two dropdowns, showing the latest hockey games. The page has gotten rid of everything that wasn’t related to hockey and now shows an overview of the latest games combined with and overview of the hockey games. Two clicks and you’re there, at your very own topic. One more selection and the site will filter the information further into something like regional information on the latest games.

But the great part is the user can quickly switch any of the categories (the region, sport or the timeframe). And they can do it without switching the other two categories. This whole process is much simpler than backtracking up the site structure to go down another branch. Plus it makes the content delivery much more personal.

BurnitBlue.com filtersHere’s another example: On BurnitBlue.com, a United Kingdom-based music portal, there is a dropdown dropdown menu system on the right hand side of the page. These dropdowns dropdowns are filled with titles that reflect the categories that visitors find important. We have all seen dropdown dropdown-based navigation before and it usually just doesn’t work very well, but in this case it works well enough to show the beginnings of content filtering. The site offers you the ability to use the dropdowns as filters for the main body content. You just pull down to your category, and the body area brings that category to the surface. While not a perfect example, in terms of consistency, and this site does a pretty good job at showing you how the initial concept works.

BurnitBlue.com headlinesThe main key to this technique is in how you display the body content. The page has to be formatted with an even representation of content within the filtered area. The Burn it Blue BurnitBlue website uses the term “Headlines’ to represent this content area, but any summary of the site content would be applicable.

What is important is that the users are presented with a few examples of the content they are looking for before they navigate further. Providing this overview of the section content is essential to making content filtering work. Within the marketing departments, eyes will light up at the thought of an information architect who supports overview titles such as “Top Stories” or even “Hot Picks.” Finally, a legitimate excuse to put featured content on the main pages. In this case, advertising meets architecture with a firm handshake.

Content filtering and development
Here are a few serious applications where the content filtering techniques are applicable:

  • Developing with metadata—As more and more information is tagged with relevant metadata it becomes increasingly important to be able to cross-reference materials. Looking at the above examples, you can see that this technique is specifically for data that is labelled under more than one category
  • Devices with smaller screens—With limited screen sizes and mobile connectivity becoming a fast approaching reality, we are in desperate need of navigation techniques that will save space while not hindering the interaction process. Using navigation elements that save space is of prime importance, this use of new menu systems or condensed navigation might just do the trick.
  • Representing the data architecture—This technique represents the data architecture much more closely than categorical navigation. Having the navigation system more reflective of the data structure allows for more rapid and iterative development.

Content filtering and horizontal navigation
To further the strength of content filtering I would like to explain how it relates to other forms of navigation. Typically, navigation systems can either be seen as being either horizontal or vertical navigation, meaning they usually either delve into the content or move sideways across it. For example, horizontal navigation could be thought of as a link to related content or as a link to a relevant discussion group. In comparison, I refer to elements like breadcrumbs and site categories as vertical navigation. Content filtering can be seen as a way to navigate both horizontally and vertically but its strengths lie in how it increases horizontal navigation.

BurnitBlue.com headlinesAs a visual example, think of an information space as being like a spider web. If you imagine each of the threads coming from the middle of the web as being different categories then you can think of the lines connecting them as links for traversing the site structure. With vertical forms of navigation, the user will “dive” down a content thread to find the desired content and perhaps use a horizontal thread to access related content. Using content filtering the user is given the opportunity to navigate along both types of threads as it the technique the user creates their own categories and can change those categories as they see fit.

Content filtering—conclusion
The reason why this content filtering works is because it gives the experience that the site is bringing the information to you rather than you having to search for the information somewhere in the site. It feels like you are getting rid of the stuff you don’t want, or even that you are creating your own pages.

Content filtering is a much more natural way of sorting through categories, especially when the majority of your content is under more than one subject. You might even say that this filtering technique is very similar to a Boolean query within a search engine, though it is a much more accessible user experience. It is this natural user experience that makes content filtering so accessible, the technique is reflective of our own intuitive process of elimination. Navigation techniques that mirror our natural sorting and selection processes will be more appreciated by those that work with them. Hopefully this new technique will influence your new navigation designs in becoming more reflective of our natural processes. Use it well!