The Dào of Search

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

Tyler Tate

Tyler is a user experience designer at TwigKit. He has been designing websites and web applications for 9 years and is the creator of The 1KB CSS Grid. You can keep up with Tyler on Twitter.