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 Â鶹¹ÙÍøÊ×Ò³Èë¿Ú 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 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:
Broadcasters: , , , , , , , ,
Social Networks: , , , , , , , , ,
Newspapers: , , , , , ,
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:
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 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:
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 Â鶹¹ÙÍøÊ×Ò³Èë¿Ú looks to offer more rich media online. These studies, although nicely laid out in , 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.
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.
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?
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 Â鶹¹ÙÍøÊ×Ò³Èë¿Ú 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 or by many a student, bedroom developer and/or legitimate business.