Job adverts for 'project managers' broken down by category on a popular recruitment site

Facets will quickly break down the dimensions in all the data we’re storing or even just the stuff that meets our search criteria. In either case we can get some form of statistical feedback e.g. on which top-level categories exist, their names and how many documents each represents. Take this search for positions as a ‘project manager’ as an example. Using faceted search, we can quickly see that some of these are are in the ‘Engineering’ field, with still more for IT professionals.

Not only does this give the user insight into what information is available, but also guides them in their search, allowing them to slice and dice the data to get precisely to the information they’re after. The question is, how do we best represent this information and make it useful (and meaningful) to us?

As you saw in Tyler’s previous posts in most cases there might be sufficient utility in just getting the broad strokes, preferably in a manner that minimises the cognitive burden of taking it in. In some cases proportions may give us the visual cues we’re after. For example it may be useful enough for us to see that there are 1) almost no orders pending shipment this week (phew), 2) a bunch in transit, with 3) the vast majority already delivered. And, thanks to faceted search all the detail on each group or dimension is a mere click away.

Facet information displayed with TwigKit as a 3D pie chart

To achieve this, the TwigKit UI libraries provide widgets that will turn facet information from the search platform into pretty pictures, charts and graphs. Traditionally, a developer would have written some code to extract the necessary information from the facet, integrated a visualisation library, and displayed the result on a web page. But we’ve done all that for you.

In the code snippet below you can see how to create visualisations using the TwigKit JSP Tag Library. All you’d need to do is specify which facet to display, the format (such as column, line or pie chart) and the result is an interactive visualisation – where clicking a particular aspect will further refine your search. Easy as pie :)

<widget:facetChart
	type="Column3D"
	facet="${response.facets.manufacturer}"
	numberOfFilters="6"
	color="ffbb33"
	backgroundColor="fbfbfb"
	query="${query}"
	width="700"
	height="250"
	title="Top Manufacturers"
	subTitle="Number of products per manufacturer"
	showAverage="true" />

Simple example of Facet information on products, broken down by manufacturer and represented as a column chart.

The important thing here is that search engines have a myriad of ways to efficiently mine vast volumes of data, providing insights that simply weren’t achievable in the traditional relational paradigm. However it is often the little things that transform that analysis into meaningful, every day tools that truly alters the way we consume information.

Just before Christmas we put the finishing touches on a prototype internal search application for British broadcaster ITV. We’ll be working with ITV in the coming months to roll out the application across their entire organisation, but we wanted to give you a sneak peak in the meantime.

Information Architecture: The Big Picture

The application searches ITV’s product catalogue, which contains a large archive of television shows and scheduling information. Our largest effort surrounded the information architecture for the application. Our goal is always to create an empowering user experience that helps people easily digest information and nimbly find what they’re looking for. To accomplish that goal, we first had to understand the data ourselves, and, just as importantly, figure out how the different user groups at ITV understand the data.

Catalogue/Schedule toggle, search field, and hierarchy of Programme, Series, Episode, and Production.

We realised that seemingly everyone at ITV was familiar with the organisation’s programme hierarchy of programmes (such as “The Office”), series (Season 2), episodes (Episode 1), and finally productions (International Version). Because it was so ubiquitous, we chose to make it the backbone of the search application. We placed the hierarchy prominently at the top of the page and branded each piece of the hierarchy with its own colour, which we also used to categorise each search result. Our goal was to help users easily traverse the hierarchy and to instinctively understand the level of each result.

Every detail page has a breadcrumb trail.

The hierarchy remains prominent after the user drills down to a single result. We included a breadcrumb trail so that the user is aware of her current position. In addition, every detail page (of a programme, for instance), lists all of its children (series, in this case). This means the user can continually navigate both upwards and downwards throughout the hierarchy.

The page of a programme always lists all of that programme's series.

Tags, capsules, category markers, and metadata boxes

Information Architecture: Presenting Metadata

In addition to thinking about the top-level hierarchy and navigation, we also focused on the presentation of metadata. We wanted the metadata to enhance the search experience and help the user hone his search. We also wanted to prioritise the information, make the important bits really jump out. We worked to shape the data in two primary ways:

• Any metadata that the user can facet on gets styled as a capsule. We chose to style keywords in tag-like containers, and other metadata, such as “partners,” in pill-shaped capsules. This communicates to the user that the items are clickable and will refine the search query.
• Important metadata should be visually prominent. (It’s obvious, we know.) We created large boxes to display the most important metadata and placed the boxes at the top of the page. Users should not need to hunt for important information, it should jump out at them.

The tag cloud indicates the popularity of the top keywords.

Data Visualisation

If information architecture was our top concern, data visualisation was a close second. The ITV search application offers two primary perspectives on the data—a catalogue-centric perspective and a schedule-oriented view. We utilised visual metaphors that fit best with each of the two perspectives: a tag cloud for for the keyword-based catalogue view, and a date histogram for the scheduling information.

The tag cloud.

The date histogram indicates how many scheduled television shows meet the search criteria on a given day.

Gallery

The catalogue view

Tag cloud

Query suggestions

Detail page of a production

Schedule with the date histogram

]]> http://blog.twigkit.com/behind-the-scenes-at-itv/feed/ 1 http://blog.twigkit.com/data-visualisations-in-search/ http://blog.twigkit.com/data-visualisations-in-search/#comments Wed, 23 Dec 2009 13:07:08 +0000 Tyler Tate http://blog.twigkit.com/?p=59

Last.fm's bar list

One of the greatest achievements of modern search engines is the ability to see the relationships between many different facets of the data. This is enabled by what’s known as “deep faceting” – knowing exactly how many results there are for each facet of the data.

The authors of DataFlow put it this way: “By giving shape to data, we… provide access and insight to the hidden patterns of meaning.”

In my earlier post, Precise to a Fault, I argued that result counts are most useful when they are used to indicate proportionality between facets. In this post, I’d like to look at some of the methods of presenting search-based information that help yield insight into how the data is related.

Tag Clouds

The first and most ubiquitous example is the tag cloud. It instantly communicates which terms are popular, and which are not. It is perhaps best suited for displaying words or short phrases where order is not important, such as tags on Flickr.

Flickr's tag cloud

Horizontal Bars

But tag clouds are ill-suited for more complex information where order is important. For linear lists, horizontal bars can be quite effective, essentially measuring each item against a standard. Last.fm pulls this off nicely to indicate how many tracks I listened to from each of my top artists over the last year.

Last.fm's bar list

Pie Charts

While tag clouds and horizontal bars are both easily achievable with traditional HTML and CSS, pie charts can also be a viable option with more creative techniques. Obviously pie charts require their components to total 100%, and so are quite useful for showing how individual slices compare to the whole.

Every year graphic designer Nicholas Felton compiles assorted statistics from his life into an amazingly illustrated report.

Histograms

Histograms can be quite useful for compactly representing large amount of chronological information. We were recently working on a project for a media company and needed to show how many times certain TV shows were scheduled to run over the next six weeks. We accomplished this with a histogram that plotted each day as a vertical bar, with the height of each bar indicating the number of shows for that day.

TwigKit combines a histogram visualisation with a range selection interface to give you insight into what you're selecting.

Mix and Match

Visualising Information can be a powerful tool for revealing the interconnectedness of the data. While each of these four visualisations has it’s own advantages and disadvantages, what’s important is that each piece of information be presented in a way that best reinforces it’s meaning.

]]>