Show your workings
I've been a designer at Audio & Music Interactive since 2002 so I've had the chance to get involved in a vast array of front and back end projects. I work in Yasser's team and on Tom's projects so I veer more towards interaction and application design. When we're developing new sites and services we'll use many a tried and tested design process to help frame our thoughts. These studies give depth to our decisions and help us be more accountable (it's like showing your workings to the teacher).
We all have our User Centered Design (UCD) favourites: stat logs, task analysis, mental models, horizon charts, personae, scenarios, card sorts, paper prototypes, user testing... the list goes on. One of my preferred techniques is 'competitor analysis'. It lies on the fringes of UCD as some of the methods don't require you to canvas for users yet it can give you invaluable clues to their expectations.
Recently I worked on the BBC Programmes Beta (please read Sophie's great introduction and Tom giving praise to the URLs) where the lifeblood, the destination, the epicenter, is the episode page. Without those pages we'd have nothing and without the original TV or Radio broadcast, that AV object, we wouldn't have the episode page. The logical conclusion, in this time of rich media websites, is to have the AV embedded on the page and so instantly the Youtube comparisons arise. How can I ensure we meet our users expectations when introducing these new pages on our website?
Cue: Polar Maps and Topography
Create a Study Set
The first thing I did was create a list of the competitors, fortunately Matt Coyne, a designer working on bbc.co.uk's global navigation, had recently produced a list for his competitor analysis... bingo! thanks Matt. Here's the starting point:
Matt's work looked at global elements from the outside in (top-down) whereas mine was to focus on the content from the inside out (bottom-up). I needed to get my study set so I trawled the sites for their comparative episode page, the rich-media page, the one with the embedded video, audio or photo. Not all of them had an appropriate page but when they did I took a screen shot. I have my study set, now for the studies.
Polar Maps help you assess the market place and find an appropriate position for your product. You need to choose two criteria on which you want to evaluate your competitors and then find the adjectives that best describe the polar extremes. Draw these scales as an axis on a grid to form a cross and place your competitors onto the grid according to your criteria.
I chose the criteria 'Graphical Skin' (with a scale from Branded to Generic) and 'Document Specific' (with a scale from Diluted to Pure). Here's the final polar map:
I must declare a bias in selecting the initial criteria as I frequently discuss related issues in my daily work. I also realise the results are subjective, not scientific, but, for me, they still show some interesting clusters. Broadcast competitors are mostly to the left and lower left with branded and diluted pages, Newspapers are central on the grid and Social Media sites are top right with pure and generic pages.
From this study we can now ask ourselves, or various stakeholders, where on the grid should our product be? Once a consensus is reached you use your neighbours on the grid to help inform your visual language and interaction patterns.
Topography describes the surface of an object. In this case our object is the rich media page and we're looking to assess the position of regular elements on its surface in relation to the embedded media. The elements I was interested in were title, description, time stamp, parent/owner/brand, ordinal context/series, categories and tags. With the new found enthusiasm for Web 2.0 at the BBC i chose to focus on the social network sub-set from the original list. I started by overlapping the screen shots and resizing the pages so that the embedded media was the same scale. I then marked out where these elements were for each screen shot. Here's the final topographic study:
And here's the study broken down, for clarity, into the individual elements:
The studies show patterns in the layout of these pages. Titles appear above the media, descriptions below, time stamp and owner top right, ordinal context adjacent right and tags bottom right. I wanted to take the study to its extreme so where at least three of the study set chose the same location for an element I created a topography best practise:
Not all of these conclusions have been strictly adhered to in the final product (indeed the final product doesn't yet include rich media) but they've helped inform the design teams and provided food for thought as the BBC looks to offer more rich media online. These studies, although nicely laid out in OmniGraffle, are not that formal, I hacked mine together using a mixture of previous methods and recent influences so I'd really encourage you, if creating your own, to experiment with the boundaries.