大象传媒 Music Showcase: UX&D perspective
Post categories: user experience & design
| 15:30 UK time, Thursday, 16 December 2010
听
Guy Debord, 鈥楾he Naked City鈥, 1957
大象传媒 Music has recently launched an alpha version of its Music Showcase and as a member of the User Experience & Design (UX&D) team involved in its development, I鈥檝e been asked to offer some additional insights around the rationale of the site design specifically. (Please also refer to blogs by my colleagues Matt Coulson and Andy Puleston).
听
I could talk in detail about the visual design of the site, but I鈥檇 prefer to take this opportunity to discuss the myriad of interaction design challenges we鈥檝e been wrestling with as a team in order to create an ambitious website whose features are, I believe, without precedent on the web, never mind the 大象传媒.
The current version of the site certainly isn鈥檛 without its faults. But better to fail spectacularly rather than continue along the well-trodden path of mediocrity, no? The challenge to establish a cohesive UX and editorial voice is still ongoing and it鈥檚 the little details (i.e. visual cues, seamless transitions from one state to another, clarity of language, etc) that we are focusing on now to make the Showcase shine as a fully polished product. Over the coming sprints 鈥 with the help of experiential insight and input from our users 鈥 we鈥檒l be reiterating, adding some new features and improving the overall UX of the Showcase (as well as integrating other sections of the 大象传媒 Music site) in order to fully realize our overall ambitions.
Mental Models
The main issue we face with the 大象传媒 Music Showcase is establishing an intuitive mental model where none currently exists.
For those unfamiliar with the concept, is a term used in the cognitive sciences to understand how people know, perceive, make decisions and construct behaviour in a variety of environments. These concepts of information processing and cognition can aid interface designers when considering UX and Graphical User Interfaces (GUIs) for websites and software, in general. We try to model interactions and employ interface metaphors in ways familiar to the user, but this can become problematic once the user encounters situations that are unfamiliar to them, resulting in a cognitive dissonance and ergo, confusion.
Continuous Playback
Of all the features of the Showcase, the most ambitious at this point is its 鈥continuous playback鈥 mechanism, which allows users (via our Playbar) to consume a sequence of audio and video clips, either as the main focal point, or 鈥榠n the background鈥 whilst browsing other areas of the site.
In essence we are attempting to mash-up two types of familiar interface and in doing so we suddenly make the familiar unfamiliar. Hence the initial difficulty in comprehension for many, despite the excitement it may also elicit. You could say it鈥檚 a scenario similar to peeps encountering a for the first time (pardon the advertising in-joke for a child of the 80s).
The continuous playback of AUDIO whilst browsing is a very familiar model to most. It鈥檚 built into your iPod or mp3 player. It鈥檚 the foundation of applications such as iTunes and Spotify. And it can be found to varying degrees in websites like , , , or the ingenious browser plug-in .
Whereas the continuous playback of VIDEO whilst browsing has inherently different qualities and adopts an entirely different interface model found only on certain television-centric devices (i.e. freeview, sky, xbox360).
Yet no one to my knowledge has released a product that offers the continuous playback of both Audio AND Video in the same space. Ambitiously (foolishly?) we鈥檝e done just that. But because people are accustomed to only dealing with these two types of playback in isolation, we face the formidable challenge of creating a UX that can accommodate both.
I won鈥檛 get into the technical details of how we achieved this, but I will just briefly mention that in considering the technical feasibility of continuous A/V playback while browsing other areas of the site we opted to employ a combination of javascript, AJAX, and CSS3.
Same content, different view
The Showcase is composed of several different but interconnect views of its content. Perhaps it might be one view too many, for I鈥檓 a believer in the adage that 鈥渁 design is perfect not when there is nothing left to add, but when there is nothing left to take away.鈥 Nonetheless, we are experimenting with different ways of exposing a potentially large number of A/V clips to suit the preferences and motivations of a wide range of users.
The main space for the consumption of A/V clips (and their associated details) is what we call the 鈥Expanded Clip View鈥 鈥斕 a view that any visitor of YouTube or Vimeo would find familiar 鈥 but with several pathways to get there...
Many users want to just see the full scope of what music clips are currently on offer without any editorial intervention. Thus we offer the ability to Browse By Genre in a List View 鈥 a utilitarian interface familiar to people accustomed to iTunes, Spotify and the like 鈥 with an ability to toggle between the two views. (Incidentally, there is also an Artist Quick Find feature, for those wishing to search for clips by a particular artist).
While the List View is fine for many, it obviously has no narrative around it. It鈥檚 literally just a faceless feed of all that鈥檚 on offer. For those users that crave some sense of curation, we also offer Showcase Collections, which are select set of clips compiled and curated by knowledgeable 大象传媒 talent and staff around a particular theme. (Again, read Andy Puleston鈥檚 blog post about the editorial nuances concerning Collections).
To highlight the special nature of these collections, they are signposted with a different masthead, and offer an alternate Grid View, which gives more prominence to the individual clips by displaying them as distinct 鈥榤odules鈥 within the context of the set. These modules also offer a rather novel feature of optionally allowing clips to be played 鈥榠n situ鈥, albeit at a smaller size, to provide an alternative to consuming and browsing content quickly. Admittedly, user responses to this feature have been mixed thus far. It鈥檚 a bit like Marmite, you either love it or you don鈥檛. It鈥檚 certainly an unconventional and unexpected interface (for video, in particular) that surprises first time visitors to the site. We still need to improve upon the GUI so that people better understand the two-prong functionality of the clip modules (to consume the A/V either in situ or in expanded clip view), but we still think that there is distinctive value in this scenario for some.
And all the while, there is the ubiquitous Playbar. It鈥檚 GUI mimics the current 鈥榗hrome鈥 controls associated with the 大象传媒 Embeddable Media Player (EMP), but since it鈥檚 autonomous from the clip and attached to the browser window, itself, in some sense you could say the Playbar鈥檚 presence converts the entire 鈥榩age鈥 into a multi-channel EMP, of sorts. It鈥檚 value (and necessity) becomes more apparent to the user once they opt to browse other sections of the site while still playing something else, in which case the media clip minimizes and docks to the controls, to allow a glanceable play-in-the-background experience. Again, unconventional. Again, further refinement is needed. But as a general model we feel it is sound.
As with any unconventional interface, some learned behavior is required in order for the user to fully 鈥榞et it鈥. That鈥檚 not to say that we don鈥檛 continually strive to create interactive spaces that are as intuitive as possible by adopting familiar metaphors and mental models when we can.
The guitar is perhaps one of the best examples of a perfect interface and one that as interaction designers we can aspire towards. The barrier to entry is low. Anyone encountering it for the first time can strum on it right away and still derive some enjoyment from it. But after a little practice, you can appreciate the instrument on an entirely different level.
I should stress that the 大象传媒 Music Showcase will be continually evolving over the coming months and to help shape its further development we would really value any and all input from our users.
Sacha Sedriks is a Senior Designer, Future Media & Technology for Audio & Music Interactive
听听
Comment number 1.
At 14th Mar 2011, Trendy wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 1)