ΒιΆΉΤΌΕΔ Music Showcase: UX&D perspective
Post categories: user experience & design
| 15:30 UK time, Thursday, 16 December 2010
Μύ
Guy Debord, βThe 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βve 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βd prefer to take this opportunity to discuss the myriad of interaction design challenges weβve 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βt 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βs 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βll 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 βin 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βs 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βs built into your iPod or mp3 player. Itβs 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βve 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βt 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βm a believer in the adage that βa 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βs literally just a faceless feed of all thatβs 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βs 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 βmodulesβ within the context of the set. These modules also offer a rather novel feature of optionally allowing clips to be played βin 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βs a bit like Marmite, you either love it or you donβt. Itβs 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βs GUI mimics the current βchromeβ controls associated with the ΒιΆΉΤΌΕΔ Embeddable Media Player (EMP), but since itβs autonomous from the clip and attached to the browser window, itself, in some sense you could say the Playbarβs presence converts the entire βpageβ into a multi-channel EMP, of sorts. Itβs 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 βget itβ. Thatβs not to say that we donβt 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)