« Previous | Main | Next »

Show your workings

Post categories:

Jamie Tetlow | 14:00 UK time, Thursday, 6 December 2007

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

polar map and topography diagram montage

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:

Broadcasters: abc.com, channel4.com, itv.com, mtv.co.uk, mtv.com, nbc.com, sky.com, news.sky.com, skysports.com

Social Networks: bebo.com, facebook.com, flickr.com, last.fm, linkedin.com, myspace.com, youtube.com, dailymotion.com, viddler.com, odeo.com

Newspapers: guardian.co.uk, independent.co.uk, iht.com, nytimes.com, telegraph.co.uk, thesun.co.uk, timesonline.co.uk

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

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:

polar map diagram

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

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:

topography diagram

And here's the study broken down, for clarity, into the individual elements:

topography of individual components diagram

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:

topography best practice diagram

Conclusions

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.

Comments

  1. At 04:16 PM on 06 Dec 2007, Andy Beeching wrote:

    The techniques you've outlined are very nice for scoping out the oft-overlooked aspect of interaction design for a site. I can see how the polar map acts as a UI SWOT analysis so often used in market research, and the topographic research would complement perhaps other research like heat maps and best practice findings in the prototyping stage.

    I guess the main concern would be getting buy-in from the business as it's all well and good producing this stuff but the people likely to appreciate them are the converted, and important data like this is often discarded during implementation.

  2. At 07:06 PM on 07 Dec 2007, Antony Watts wrote:

    What occurs to me is that your analysis is just based on the current available sites.

    And they mostly look the same.

    I wonder why? Is it that they also are doing the same analysis, and we are getting a kind of sameness here?

    How could we stimulate some original designs into the process. How about asking a few designers or art colleges to come up with som eideas then texsting them with users?

  3. At 10:34 AM on 12 Dec 2007, Jamie Tetlow wrote:

    Andy, "getting buy-in from the business" is the exact reason these diagrams were produced. I had an initial hunch but wanted to find stronger evidence. I was fortunate to have the study set provided by an external source as that would help overcome any implied bias. It's true my findings have not been fully adopted but I see that's a result of me not promoting the studies enough, that's what I've learnt from this experience, finding an advocate on the business side is essential.

    Antony, the analysis is firmly based on a selection of the current leading sites and i think, if anything, this helps expose the similarities. I don't believe sameness (or a 'pattern language') is a bad thing as it lowers the entry level for new users... and the BBC has as diverse an entry level user as any. We're trying to create a comprehensive foundation of programme support first and foremost. I hope, in time, this will extend to offer the kind of feeds or APIs that have allowed the mash-ups of sites like Flickr or Last.fm by many a student, bedroom developer and/or legitimate business.

This post is closed to new comments.

BBC iD

Sign in

BBC navigation

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.