´óÏó´«Ã½ iPlayer: Designing the iPhone app
Chris's hand, holding an iPhone running the iPlayer app his team designed
Hello, my name is Chris Elphick and I'm the Senior Designer leading the ´óÏó´«Ã½ iPlayer iPhone App project. Earlier this week saw the debut release of the ´óÏó´«Ã½ iPlayer App for iPhone and iPod Touch. In this post, I'd like to give you a brief overview of the thinking that went into the design.
Background
As Executive Product Manager David Madden explained in his blog post more and more people are choosing to watch television programmes or listen to the radio on their mobile. In fact a staggering 16.5 million programmes were watched on mobile this October 2011 alone. A large proportion of those mobile views were on iPhone.
This significant user demand provided an opportunity to create an improved user experience more appropriate to the iPhone as well as introduce enhanced features and interactions to our audiences.
Our Design Challenge
In an initial brainstorm, the team identified a series of questions to answer such as:
- How might we let people plan their TV viewing?
- How might we improve the Live TV/Radio Experience?
- How might we encourage people to explore more programmes?
We also had to consider the various restrictions and opportunities that designing for a mobile device offered us. These included:
- The difference between portrait and landscape orientations
- Gestural interactions
- Screen Size.
First Steps
To kick things off, we held a number of workshops. First off we focused on generating as many ideas as possible in answer to our list of design challenges. We went for quantity over quality at this point.
sticky note heaven: some early thoughts and ideas
Next came the fun bit. We sketched out how those ideas could look visually and considered how users might interact with them. Any medium is appropriate at this point, as long as it's quick and demonstrates the idea effectively. Paper prototyping is a great way of illustrating and testing basic user journeys. For instance here is my rather rudimentary version of our channel hopping feature:
my early thoughts on flipping between live TV channels
Sticking these basic concepts in front of users helped test the integrity of early ideas and narrowed down our options.
Not reinventing the wheel
This isn't the first time the ´óÏó´«Ã½ iPlayer team has designed an app. Last year saw the launch of the iPad and Android iPlayer apps. An integral part of our process was reviewing those current products and exploring what we could learn from them and how to develop them further within the context of an iPhone.
The iPlayer App on Android
In essence the iPlayer Apps contain the same features and content, but of course Android users, for example, have a different expectation of how to navigate from iOS users. Gestural interactions are a good example of differences between the user interfaces.
Gestures: get me there quick!
Network and Wifi connectivity is obviously a major concern when it comes to using apps. To reduce the number of journeys and page loads we looked at implementing gestures that would let the audience trigger actions more quickly.
An earlier idea we had for revealing additional functionality without having to go through to an episode page. A 'long press' on a programme would reveal the icons.
With a wealth of potential flicks, taps, and drags to choose from we have kept things simple. To reveal the favourites star on the app, you simply swipe on a programme item in a portrait list.
Swipe and tap the star to favourite a programme
And to play a programme immediately and by-pass the epsiode page, you can simple double tap on any programme item in a vertical list.
Portrait vs Landscape Orientations
Earlier I mentioned the opportunities that designing for mobile offers us. One, of course is the ability to change orientation. There was a frequent debate within the design team as to the importance of portrait versus landscape - whether or not it was helpful, necessary or even pleasing to present content differently in a landscape view compared to portrait.
We explored multiple possibilities for landscape views dependent on where you are within the app. In early designs we considered showing as much content as possible in a single view but we felt it wasn't taking full advantage of the screen real estate, nor presenting anything new.
User research, told us that certain users including those who are dyslexic liked the simplicity of a more visual menu with fewer options.
Some potential landscape views
By rotating the phone to landscape we wanted to offer a different cut of the content. In the case of TV and Radio Featured, the landscape view provides a full screen image to scroll through like a picture gallery.
Portrait and Landscape views of the app
Users can tap on the "i" button to reveal the programme synopsis and the Favourite button. We call it the 'lean back' mode where the interface is stripped right back showing only what is necessary.
A landscape view showing the info overlay.
Improving the Live experience
In the past, thanks to weak connections and poor quality streaming, watching live television on a mobile phone has not always been the best experience. The introduction of adaptive bitrate technologies has brought about a much-improved streaming quality. This offered up an opportunity to provide an enhanced 'live experience'.
I borrowed the idea of 'channel hopping' from TV, and my colleagues and I explored various ways of switching channels or stations whilst playing a programme.
This early design explored the idea of swiping the entire screen to flick between channels.
We developed a very simple mechanic that lets users browse what's playing on other channels whilst watching live television, letting them compare programmes across the ´óÏó´«Ã½.
The Live Channels Switcher
We employed the same device to reveal related programmes. So now when you're watching Doctor Who you can browse other episodes from the series without leave playback.
Visual design and Branding
The main challenge here was striking a balance in styles. We wanted to stay as faithful as possible to iPlayer's brand and styling whilst being sensitive to Apple's core UI and aligning it with the ´óÏó´«Ã½'s Global Experience Language (GEL). Luckily the textures and gradients from the ´óÏó´«Ã½ iPlayer website lend themselves well to the tactile styles familiar to the iPhone's UI.
Some examples of how the visual style and layout changed as the project progressed
Where possible though, we have introduced elements of our global experience language that reflect the direction the iPlayer website is taking. This is most obvious in the full screen landscape views or the player controls where the interface is much simpler, letting the content take centre stage.
Branding proved an interesting challenge. Since the black and pink are such distinctive parts of the brand it didn't seem necessary to take up valuable screen real estate with a logo in the header on every page.
Instead we decided to seed the logo throughout the interface.
When the app is launched, as the content is loading the logo appears on a start screen and then recedes into the background to be covered with content.
Throughout the app you will also see the iPlayer play icon discretely sitting behind thumbnails before they load.
Looking to improve
There has been lots of in-depth user research by the ´óÏó´«Ã½ for both iPlayer on all platforms, meaning many of our initial research was based on those findings. But launching a product on a new device, especially one as popular as iPhone required some further testing and research to help guide and verify our designs.
We carried out in depth testing sessions with iPhone users (both familiar and unfamiliar with ´óÏó´«Ã½ iPlayer, ranging in ages and capabilities) lead by Amelia Still, our Usability & Accessibility Specialist and carried out by external agency Experience Lab.
I also find comments and reviews from across the web invaluable, so thank you for your continued feedback. This app is a first release and is a glimpse of what's to come. I will be looking to improve it and implement some truly exciting features and functionality next year.
Chris Elphick is Senior Designer, ´óÏó´«Ã½ Future Media User Experience and Design
Credits
A number of people contributed greatly to this project: Kathryn Leach, Suzie Blackman, Richard Jones, Anoushka Ferrari, Ben Guyer, Mike Albers (Design Team), Amelia Still (Usability and Accessibilty), David Berlin, Mark Bamber (Business Analysts), David Madden (Executive Product Manager).
The dedicated Development Team in Salford : Fiona Iglesias, Andy Hulstone, John Steele, John Haseldon Haselden, Alan Burton, Joe Timmins and all Paul Rutter, Steven Cross, and Richard George (Test Team).
(Credits Updated 19th Dec - Ian; Haselden spelling corrected, Burton & Albers added Jan 10th).
Comment number 1.
At 16th Dec 2011, Kenichi Udagawa wrote:Please add the ability to download shows to the next release! That would be brilliant! And whilst I know the international app is a different beast, it seems bizarre that they have this ability and yet we don't ...
Complain about this comment (Comment number 1)
Comment number 2.
At 16th Dec 2011, Ian McDonald wrote:@Kenichi
Thanks for your comment. But Chris' blog post is about its design; conversation about feature suggestions should go on David Madden's post.
Complain about this comment (Comment number 2)
Comment number 3.
At 17th Dec 2011, U15064552 wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 3)
Comment number 4.
At 17th Dec 2011, Russ wrote:For the favourites function, are you investigating a way that can identify a programme already viewed or listened to?
Russ
Complain about this comment (Comment number 4)
Comment number 5.
At 17th Dec 2011, Memolipd wrote:I Really like it. I especially like the portrait/landscape views, very clever! great work
Complain about this comment (Comment number 5)
Comment number 6.
At 17th Dec 2011, Dean Mayers wrote:It’s interesting reading how you came up with the main design for the iPhone app. I think it's a great start and by far the best of the various "player" apps. I have made a few observations in ways it could be improved.
Icons: A lot of the icons are not retina resolution (tab bar icons, info icon in horizontal portrait, channel logos in episode view). The screens in this post shows testing on an iPhone 4 and thinking of the amount of eyes that must have seen it along the way it’s somewhat surprising it didn’t get picked up.
Use of gestures: Gestures are like keyboard shortcuts. Not easily discoverable but can speed up your workflow if you know them. With this in mind why not go crazy and have gestures for everything? For example left to right swipe to favourite (as it is now) and right to left to instantly play. But to avoid accidental gestures have it track your finger in real time to a certain point before executing. Swipe down on the channel/station selector to show a grid of channels/stations for quick selection.
Animations: Most of the animations feel either too slow or extraneous. For example switching between Featured, Most Popular and Channels/Stations has a slow slide up animation which makes no conceptual sense and makes the app feel super slow. I think either a subtle cross fade or fast swipe would be less jarring and feel 100x faster.
Horizontal view: Is the info button really necessary when there is ample space to show all the information without it feeling cluttered. I end up tapping it almost every time anyway to read the synopsis.
Terms, Privacy and Help shouldn't kick you out to Safari, it should load a simple web view instead. Or get rid of the arrows to hint that you will leave the app when you tap them.
When you unfavourite a program (which can be quite difficult because the target seems to be very small) you show a modal dialogue which explains that it will be removed from your favourites. Is this not already implicit? But if you choose to keep the dialogue surely the button should say what is going to happen, i.e. 'Remove' and not just 'Continue'.
Program names get two lines in the list view but only one line in the episode view. Shouldn't the episode view strive to show all or as much of the information on a program as possible?
Anyway, this is what I've noticed so far! Thanks for the insight.
Complain about this comment (Comment number 6)
Comment number 7.
At 17th Dec 2011, Robert Barnett wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 7)
Comment number 8.
At 18th Dec 2011, Eponymous Cowherd wrote:Hmm. Looks like the moderators are having an off day. Ian jumps on Kenichi for a mildly off-topic post, but they completely misses the fact that "Robert Barnett" was spamming for the "Tapjoy" product. Yes, you removed the link, but missed the fact that the entire post was merely an ad.
Complain about this comment (Comment number 8)
Comment number 9.
At 18th Dec 2011, Mark Wilson wrote:Fascinating to learn the design process you went through. One massive frustration I have though (and if it was solved I would use the app more) is that there is no offline playback capability (at least not that I've found): seems strange for a mobile device... after all, if I have to be connected to the network I might as well use the website - apps are great for use in disconnected scenarios...
Complain about this comment (Comment number 9)
Comment number 10.
At 19th Dec 2011, Ian McDonald wrote:@Eponymous Cowherd
I merely directed Kenichi to the right place for his feedback.
I agree with you about #7, and think the whole post, not just the web address, should go.
Complain about this comment (Comment number 10)
Comment number 11.
At 19th Dec 2011, JoeAD wrote:Very interesting read. I'm really enjoying these semi-technical/theoretical 'behind the scenes' blog posts.
One question: Many people are confused on how to enable AirPlay, expecting to see the AP icon within the player controls of the app. Was there an explicit decision taken not to implement AirPlay in this way or was it due to a limitation of the api?
Also would love to know how the app was built. i.e. was the native iOS SDK used, use of any 3rd party products (Appcelerator, streaming frameworks, etc)
Complain about this comment (Comment number 11)
Comment number 12.
At 19th Dec 2011, Federico wrote:Excellent post, thanks.
For those interested in learning more about the design process of a mobile application, I recommend the following course from Stanford University on iTunes University:
Complain about this comment (Comment number 12)
Comment number 13.
At 19th Dec 2011, marcode wrote:you just ignoring android entirely now?
id comment on the design but all we get is a bookmark for the bbc site, which frankly, given the android market share, is ridiculous.
Complain about this comment (Comment number 13)
Comment number 14.
At 19th Dec 2011, jwfrancis wrote:Connecting to a television via the dock connector and an Apple home-cinema video cable doesn't work. This does work on the iPad version. Same OS versions.
Complain about this comment (Comment number 14)
Comment number 15.
At 19th Dec 2011, Nathan wrote:Can we have a windows phone version please!
Complain about this comment (Comment number 15)
Comment number 16.
At 21st Dec 2011, robsonj wrote:Please release the iPlayer in the USA, I'd happily pay a monthly subscription to have access to the iPlayer. There never seems to be any news released on the reason for the hold up which is frustrating.
Complain about this comment (Comment number 16)
Comment number 17.
At 22nd Dec 2011, wp7agile wrote:We want a Windows Phone app as well...
Complain about this comment (Comment number 17)
Comment number 18.
At 29th Dec 2011, ed_faz wrote:can you please sort out the crashing issues on both ipad 2 and ipod touch. every thime the app opens it crashes. ios5.0.1
Complain about this comment (Comment number 18)
Comment number 19.
At 4th Jan 2012, Skuff wrote:Where is a decent Android app please??? You do realise Android OS out sells Apple OS now? I have an Android phone and brand spanking new tablet but I have to go to the iPlayer website which defaults to Mobile and doesn't allow me to switch to desktop view for iPlayer (although the rest of the ´óÏó´«Ã½ website allows this).
Fair enough I can watch through the browser, but I shouldn't have to should I? I see an App in the market place through a browser but not through the installed Android Market place app.
I then find out my Honeycomb version tablet apparently isn't supported!!! So does that mean then entire Honeycomb Android OS is not supported?
Come on ´óÏó´«Ã½, I love the PS3 app - its brilliant. The ´óÏó´«Ã½ website is probably my most favourite website but your Android apps are shambolic, pull your finger out!
Complain about this comment (Comment number 19)
Comment number 20.
At 4th Jan 2012, Skuff wrote:I want to watch LIVE TV and listen to LIVE radio, but I can't... why not ´óÏó´«Ã½??? I can't watch LIVE anything through the website using my tablet because your website identifies it as mobile and won't allow live playback period.
For an impartial, unbiased establishment it is to say a little strange you are only concentrating on Apple OS!
Complain about this comment (Comment number 20)
Comment number 21.
At 5th Jan 2012, Ian McDonald wrote:@Skuff
Hi. Thanks for your comments, but this blog post is about designing the ´óÏó´«Ã½ iPlayer on iPhone. Any future plans for iPlayer on other platforms are off-topic here, but David Madden does talk about ´óÏó´«Ã½ iPlayer on Android on his blog post.
Complain about this comment (Comment number 21)
Comment number 22.
At 9th Jan 2012, Raveem wrote:Comment No 1: "Please add the ability to download shows to the next release!".
Seconded! Without the ability to download, how is this any better, in substance, than the mobile website for iPlayer?
Complain about this comment (Comment number 22)
Comment number 23.
At 25th Jan 2012, Jimmy06 wrote:Ditto for the comments regarding watching offline. I'd love to watch things on train journeys and don't really see the point of it without that. I'm very rarely in a place with wifi where I'd want to watch tv that isn't home.
Complain about this comment (Comment number 23)