Designing ³ÉÈËÂÛ̳ iPlayer for Xbox 360
³ÉÈËÂÛ̳ iPlayer on Xbox 360
Hi, my name is Rae Spencer, and I'm acting Senior UX experience designer at the ³ÉÈËÂÛ̳, working across all versions of ³ÉÈËÂÛ̳ 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 ³ÉÈËÂÛ̳ 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 ³ÉÈËÂÛ̳ 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 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
We also aimed to make this product accessible to new XBox users and Amelia Still (Senior Usability and Accessibility Specialist at the ³ÉÈËÂÛ̳) 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
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
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 ³ÉÈËÂÛ̳ 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
The future
This is the first ³ÉÈËÂÛ̳ 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, ³ÉÈËÂÛ̳ Future Media
Comment number 1.
At 29th Aug 2012, stewhites wrote:Now if only the 360 and PS3 versions would remember favourites.
Complain about this comment (Comment number 1)
Comment number 2.
At 29th Aug 2012, Robert Andrews wrote:Do you have any stats on how many people with Kinect actually use it to navigate iPlayer, both by voice and hands?
Complain about this comment (Comment number 2)
Comment number 3.
At 29th Aug 2012, Martin wrote:Is TiVo going to get the ³ÉÈËÂÛ̳ iplayer interface which is on Xbox 360 , PS3 and Youview ? TiVo still has the old interface.
Complain about this comment (Comment number 3)
Comment number 4.
At 29th Aug 2012, Gordon wrote: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?
Complain about this comment (Comment number 4)
Comment number 5.
At 29th Aug 2012, Andrew Caldwell wrote:The ³ÉÈËÂÛ̳ 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)?
Complain about this comment (Comment number 5)
Comment number 6.
At 30th Aug 2012, Chris Brennan wrote: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.
Complain about this comment (Comment number 6)
Comment number 7.
At 31st Aug 2012, paul m wrote: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.
Complain about this comment (Comment number 7)
Comment number 8.
At 31st Aug 2012, Alwyn ap Huw wrote: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
Complain about this comment (Comment number 8)
Comment number 9.
At 31st Aug 2012, Marcus Parnwell wrote: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.
Complain about this comment (Comment number 9)
Comment number 10.
At 31st Aug 2012, lugburz wrote:I am also having playback issues since downloading the radio update which I don't need or want but have to download.
Complain about this comment (Comment number 10)
Comment number 11.
At 1st Sep 2012, Marcus Parnwell wrote: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.
Complain about this comment (Comment number 11)
Comment number 12.
At 3rd Sep 2012, Azuse wrote: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.
Complain about this comment (Comment number 12)
Comment number 13.
At 22nd Sep 2012, Joie wrote: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.
Complain about this comment (Comment number 13)
Comment number 14.
At 10th Oct 2012, tom_502 wrote:³ÉÈËÂÛ̳ Iplayer Team:
A way to link your favourites across laptop/xbox/phone would be great!
Complain about this comment (Comment number 14)
Comment number 15.
At 5th Nov 2012, talisker71 wrote: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.
Complain about this comment (Comment number 15)
Comment number 16.
At 7th Nov 2012, Rae Spencer wrote: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
Complain about this comment (Comment number 16)
Comment number 17.
At 10th Nov 2012, talisker71 wrote: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.
Complain about this comment (Comment number 17)