Designing BBC iPlayer for Xbox 360

Wednesday 29 August 2012, 13:04

Rae Spencer Rae Spencer Senior Designer UX&D

Tagged with:

BBC iPlayer on Xbox

BBC iPlayer on Xbox 360

Hi, my name is Rae Spencer, and I'm acting Senior UX experience designer at the BBC, working across all versions of BBC iPlayer including connected TVs and consoles.

My collegue Katherine Aherne and I started work on iPlayer for XBox last year, and with today's release of Radio support in iPlayer on Xbox, we thought we'd provide an insight into the process we used to create a consistent and usable design for an innovative new platform.

The design challenge

TV friendly interfaces need to work with 5-point navigation. In simple terms, people watching TV do just about everything by using five buttons: Up, Down, Left, Right and Enter. That's pretty tricky, especially if as a designer, you are used to creating layouts where your audience will be able to access everything on screen using a mouse.

TV is traditionally what we call a 'lean-back experience' - that is, the users are sitting on a sofa with a remote control, rather than sitting up on an office chair in front of a computer. This means we assume they want to spend less time navigating around our systems, and more time leaning back to watch video. Our designs need to be as simple, speedy and non-intrusive as we can manage, whilst still providing all the features they would expect from iPlayer.

generic V3 BBC iPlayer home page

Generic V3 BBC iPlayer home page

The aspiration for iPlayer on XBox was to expand on the ever-growing iPlayer V3 portfolio while providing the best user experience for the device. V3 for TV designed by Nick Beese (Senior UX Designer leading the project) and myself is an interface optimised for 5 point navigation, intended to surface relevant content quickly and guide you from one piece of media to another seamlessly using onward navigation from playout.

The interface achieved this aspiration through a collection of rotating carousels referred to internally as a horizontal fruit machine. This proved to be the most optimal way to date of using iPlayer on a TV. The horizontal carousel metaphor however proved to be our biggest hurdle when adapting iPlayer for TV to work on the XBox platform.

First steps

To kick the project off there were various meeting between the BBC UX teams and the UX teams at Microsoft. From this Katherine and I identified the sections of the V3 UI that would need the most adaptation to work consistently with gesture, voice and controller input.

These included:

Channels and categories

Video playback

The barrelling navigation seen in our home page view

Search

We also identified some of the signature experiences that have become synonymous with any iPlayer product and would need to be represented here. Some of these are yet to be released but include favourites, resume and onward discovery from playback.

From this we explored various ways of adapting the already established UI navigation to cater to the multiple input environment before settling on the closed and open pivot mechanism seen today. The closed pivots allowed us to surface relevant content quickly, thus not ending up with a menu driven UI, while maintaining a mechanism familiar to the XBox community. Throughout the process we were careful to maintain a consistent brand experience that our users have come to expect from iPlayer while remaining faithful to the needs and expectations of the XBox community.

Exploration sketches

Exploration sketches

We also aimed to make this product accessible to new XBox users and Amelia Still (Senior Usability and Accessibility Specialist at the BBC) ensured in all rounds of user testing that we had an even demographic to help us improve the reach of our final product. This also included paired testing in homes where one user owned and used the XBox and the other did not.

Marrying the three inputs

This platform brought unique challenges with the three input mechanisms I have already discussed. Our main aim as a team was to marry the experience of using these as closely as possible to help the user mentally map the interface while toggling between them.

Voice control (VUI) proved to be unsurprisingly the leading influence in other UI decisions. If your user is uncomfortable or unfamiliar with the terminology used in VUI it is probably not natural to use "VUI" as a button title.

VUI screen design

VUI screen design

Adapting the two and three tier carousels

Two of the more challenging adaptations of the V3 UI were the channels and categories sections. The XBox swipe gesture, known as the gross swipe, lead us to adapt the categories section to a two paged closed pivot interface, a user journey that is shorter than most of the XBox reference applications when it comes to getting our users to content faster.

When the user selects their chosen category they are taken to the open category carousel and are then able to browse the full catalogue for that category. Content within the open category pivot is grouped by brand, as seen on the Playstation, to optimise browsing time. This was especially important when dealing with the physical exertion of using gesture to interact with the UI.

The channels section provided the added complexity of a third level of navigation; users can navigate within an open channel pivot by the broadcast date. Again a journey we aspired to shorten when comparing iPlayer to the other applications seen on XBox. This was achieved by a day selection navigation being added to the open channel day pivot allowing the user to move between days on an open channel pivot using any of the three input mechanisms.

Exploring differences between the generic design and the design used for Xbox 360

Exploring differences between the generic design and the design used for Xbox 360

Keep it consistent

 

As an iPlayer design and development team despite what device or platform we are working on we strive to make the experience of using iPlayer feel familiar. With this platform, as with others, that included the tone of voice, use of language, architecture and signature visual design that users have come to expect from any iPlayer product.

Visual design

Aside from striking the balance between a BBC iPlayer experience and an XBox experience there were interesting challenges when dealing with designing the iPlayer look and feel for an XBox UI. Blend, which is used to produce the graphical user interface for XBox, accepts pure vector graphics for optimal scaling at different resolutions, minimal file size and thus reduced load times. This created difficulties when translating some of the subtle shines and shadows achieved in the HTML release.

Katherine and I worked closely with the development teams and identified the key visual elements we needed, to reproduce a signature experience including the arc shine, 'nightrider' progress bar and programme information page.

Programme information page

Programme information page

The future

This is the first BBC iPlayer release on a device with gestural and voice recognition, we hope to glean from this an even deeper insight into what our users need on this platform and across the iPlayer portfolio. We see this as an opportunity to further test, research, verify and develop our designs.

Katherine and I look forward to your feedback and comments; we consider them truly essential to the relationship we have with you our audience and to deliver quality products that meet your needs.

Rae Spencer is Senior Designer, UX&D, BBC Future Media

Tagged with:

Comments

Jump to comments pagination
 
  • rate this
    0

    Comment number 1.

    Now if only the 360 and PS3 versions would remember favourites.

  • rate this
    0

    Comment number 2.

    Do you have any stats on how many people with Kinect actually use it to navigate iPlayer, both by voice and hands?

  • rate this
    0

    Comment number 3.

    Is TiVo going to get the BBC iplayer interface which is on Xbox 360 , PS3 and Youview ? TiVo still has the old interface.

  • rate this
    0

    Comment number 4.

    I don't have an Xbox 360, but I recognise this interface from my 2012 LG Blu-ray player.

    It works pretty well - I can certainly appreciate the effort that has gone into it compared with older set-top box UIs - but do you have any information why live streaming isn't available on this platform?

  • rate this
    0

    Comment number 5.

    The BBC iPlayer on the Xbox 360, is really one of the best iPlayer experiences out there.
    Any idea when we'll be able to get live TV? And the ability to watch something with friends (like ESPN or Sky has on the 360 already)?

  • rate this
    0

    Comment number 6.

    Hi. I signed up for this forum to leave this one specific comment -

    Your Xbox iplayer doesn't work. At all. To briefly explain....

    I bought an xbox 360 2 months ago. I have kinect. I also have a PS3, an iPhone, an iPad and a PC, all of which I have owned for a period of years. Of all the options I have for using your service at any given moment, the Xbox is my favourite. Voice control, you understand - but it doesn't work. 'There is a problem' it says. Every single time. I have 10 meg fibre optic broadband, and can actually watch the same programme on every device I have mentioned simultaneously, while there is a 'problem' with yours. Every time. Please fix it. If it worked it would be the bomb.

  • rate this
    0

    Comment number 7.

    After the recent Xbox360 update to add radio to iPlayer the tv player just does not function. Every program you try to watch will not play. Please sort this out, the service was great before hand.

  • rate this
    0

    Comment number 8.

    I am getting the same problem as Paul M - since downloading the radio update I can no longer watch any TV programme on the app

  • rate this
    0

    Comment number 9.

    Hi - I am Marcus Parnwell, Product owner for iPlayer on TV devices. As you are aware, we are experiencing a problem with playing SD programmes on our Xbox version of iPlayer. We believe HD programmes are unaffected because they are processed through a different path.

    We are working hard to resolve this issue. On behalf of the iPlayer team, please accept our apology for this.

  • rate this
    0

    Comment number 10.

    I am also having playback issues since downloading the radio update which I don't need or want but have to download.

  • rate this
    0

    Comment number 11.

    Hi again, just wanted to confirm that we have resolved the problems with playing programmes in iPlayer on the Xbox 360. Again thank you for your patience in this matter.

  • rate this
    0

    Comment number 12.

    I updated in the afternoon, shortly after it became available and it worked flawlessly - although I only use it for HD content.

    Curiously, yesterday (2nd) it began buffering after 25ish minute into a program. Toughest Place To Be A Ferryman & Inspector George Gently (episode 2) both suffer this along with subsequent buffering problems every 5-10 minutes after.

    I try not to believe in coincidence and as such have spent a few hours double checking my equipment and line. Traffic is being correctly categorised, bandwidth is excessive and the iplayer applications are working on the laptop, pc, wii and tv. The issue is limited to the xbox.

  • rate this
    0

    Comment number 13.

    IPlayer on my Xbox would be awesome if it worked. Every time I go to open the app an error has occured and its had to close. I don't even get past the logo. Not impressed right now.

  • rate this
    0

    Comment number 14.

    BBC Iplayer Team:

    A way to link your favourites across laptop/xbox/phone would be great!

  • rate this
    0

    Comment number 15.

    Hi Rae / Marcus - I see part of this design has now appeared on the Virgin TiVo version. Is the rest of the design on its way to TiVo too?

    Also, with the new design as it currently is, there is one omission from the previous design - no link to Other Episodes when you view Last Played. That was very handy, as it saved looking for the programme again.

  • rate this
    0

    Comment number 16.

    Hi Talisker71,

    We will not be putting the Xbox interface on Tivo, as this was specifically designed to work with voice and gestural input. Though we have, as you have noticed, made some changes to facilitate a deep linking experience for the Tivo platform. Due to these changes the ability to see more episodes of a last played item is hindered, though you will be able to watch more episodes in a single session from play out.

    You may also find the previous searches functionality useful, as it offers a quick way to find all the available episodes for a programme you are interested in.

    All the best
    Rae

  • rate this
    0

    Comment number 17.

    Thanks Rae - with regards the UI, it was really just curiosity, as its largely fine as it is to be honest. I since spotted that you could access more episodes via the Related Programmes when a programme is playing. Is there a technical reason Related Programmes cannot be accessed before you start playing an episode?

    And without meaning to go too far off topic (although I guess this is an old article now), are there any plans to improve the FF and RW on the Tivo iplayer? Having been so used to smooth FF and RW with visuals, the iPlayer seems a bit hit and miss, with the picture going black, and going back or forward in chunks.

 

This entry is now closed for comments

Share this page

More Posts

Previous
Search Engine Optimisation: Rebuilding Food

Tuesday 28 August 2012, 09:41

Next
My Year on the BBC Internet Blog

Friday 31 August 2012, 17:08

About this Blog

Staff from the BBC's online and technology teams talk about BBC Online, BBC iPlayer, BBC Red Button and the BBC's digital and mobile services. The blog is reactively moderated. Your host is Nick Reynolds.

Blog Updates

Stay updated with the latest posts from the blog.

Subscribe using:

What are feeds?

Links about BBC Online

BBC Internet blog Archive

owl-plain-112.jpg 2012 ι 2011 ι 2010 ι 2009 ι 2008 ι 2007

Tags for archived posts