BBC iWonder: Introducing Interactive Guides

Sunday 19 January 2014, 18:00

Andrew Pipes Andrew Pipes Executive Product Manager

Today we’re announcing BBC iWonder, a bold new brand whose mission is to unlock the learning potential of all BBC content.

We know that people's curiosity is often sparked by BBC programmes, and also by the world around them. BBC iWonder is for these curious minds, and at its' heart is a new content format, interactive guides. Guides will invite people to lean forward, and actively explore a range of factual and education topics from Science and Natural History, Arts, History, Religion and Ethics, Food and more. In this blog post, I’ll outline the features of iWonder interactive guides, as well as what to expect from this new format in the near future.

interactive guides_3_screens.jpg Interactive guides on three screens

A new way to tell stories on the web

Interactive guides take a different approach to presenting content compared to traditional web articles or TV and radio programmes online. They organise video and audio, rich infographics, written summaries, and activities into stories that make the most of our interactive medium. We know from plenty of research that people learn better by doing, and we’ve designed our guides to be “sit forward,” placing a user’s interactions with the content at the core of the experience. Interactive guides take the audience through a series of steps that ask them to look at multiple perspectives of intriguing questions, always with the chance to reflect on the significance of the story at the end.

The initial set of interactive guides mark the start of the World War One season on the BBC and are presented by experts including Dan Snow, Kate Adie, Ian McMillan and Neil Oliver. For more on these read Executive Producer Tim Plyming’s blog post.

A multi-screen modern media landscape

More and more of our audiences are accessing our content via mobile and tablet devices. In fact, for the first time this past Christmas, the proportion of people visiting the BBC Food website from a tablet or smartphone was larger than those visiting from a PC. This trend is set to continue. With the look and feel of “native mobile applications” getting ever more immersive, our audience’s expectations of accessing content on their phones and tablets is high. Expecting our users to struggle to navigate a full “desktop” website on a tiny screen isn’t acceptable any longer.

We all instinctively know that learning is not something that happens at a single time or place only, sitting quietly at a desk or with a PC. Our guides display beautifully no matter what screen size you view them on, accompanying you as you move through your life - at school, home or work, while you're on the go, or while you wait for something else to happen.

To achieve this, our team has employed responsive web design from our first lines of code. With responsive web design, the devil is in the detail. On mobile especially, response times are absolutely crucial. If a web page takes longer than a couple of seconds to load, you’ve already lost a huge percentage of potential browsers. To keep response times down to a minimum, we’ve had to develop a system that loads in just the essential components of the page at the right times. Mobile-sized images download first, then when the page’s Javascript detects the browser’s capabilities, higher-resolution images get ‘loaded in dynamically.’ This can mean the difference of up to a mega-byte’s worth of content for a browser to download. At that page weight, a mobile browser can become agonisingly slow.

For pictures with a dense amount of information on them, such as infographics, it’s important not just to resize a smaller version of a big image, but to load in a completely different image that’s best for that screen. Usually this means a more “zoomed in” view right for mobile. Our system elegantly handles all this image swapping without the user ever noticing. Try reducing the width of your browser window to see it in action at the link above.

We’ve strived for this ‘invisible’ elegance in other places too. For instance, we load in the correct media player for any device behind the scenes, so that visitors on an iPhone don’t get served a Flash player, which won’t work on their Apple device. In this way, everyone should get exactly the same high-quality experience, all the time.

The BBC also has a firm commitment to both web accessibilityand backwards compatibility, making our experiences just as pleasing on older browsers such as Internet Explorer 8 as on newer, more capable web browsers. We’ve taken care to ensure that for users with Javascript turned off, or for those using screen readers, all the content is both available and understandable.

Being able to repeatedly produce immersive experiences

Over the past year or so, many highly engaging web experiences have delighted web audiences, such as the New York Times’ Snowfall story. When our development team first set out to imagine what our interactive guides experience should be, we looked at those examples with a degree of envy. But we also noticed that most seemed to be “one-offs” and didn't work well on mobile devices. We were adamant that we wanted our new format to have all the qualities of this class of highly immersive story - but tailored for every device - whilst being straightforward for our editorial teams to reproduce quickly and repeatedly.

Those were the three main principles which guided our development, and are the reason the iWonder interactive guides represent such a giant leap forward in the BBC's ability to inspire and support learning. Our editorial colleagues now have a toolkit that lets them to put together and publish these rich stories in hours or days, rather than the weeks that it might have taken just a year or so ago. And whereas in the past, each rich story experience would require its own bespoke code and design, there's now just one codebase to maintain and add features to.

In the coming months, we’re adding a collection of activities that will sit within the guide format's sequence of ‘steps’. Look out for visual quizzes, clickable infographics, and plenty of other digital toys to play with, as the library of options available to our production team grows.

I'd love you to know what you think, so please do leave a comment.

Andy Pipes is Executive Product Manager, Knowledge and Learning

Comments

Jump to comments pagination
 
  • rate this
    +1

    Comment number 5.

    An interesting idea. You seem mainly to be using CSS3 media queries to get the size change effects in Chrome (which isn't that controversial). The fact that there seems to be no way to close the video down once it is opened is highly annoying however. Still, I like the idea of simple blocks of bold coloured content that resizes based on screen width.

  • rate this
    +1

    Comment number 2.

    RE: previous post.

    This seems to be a problem with the document mode in internet explorer. It defaults to ie7 standards causing it to fail for me. Setting it on 10 seems to fix it.

  • rate this
    0

    Comment number 3.

    Hello @Kevin. Good to see that you were able to identify the problem and fix it yourself. You're right in that at the moment, Compatibility Mode (or the "Intranet" mode of Windows RT tablets) is not supported by our product. However, we are looking at ways that this lack of support can be better flagged up for the user if they have that setting switched on.

  • rate this
    0

    Comment number 4.

    Excellent product.

    Hope the maintenance work is better than the BBC Sport App revision, Which was reported as having faults within hours of launch, before Christmas, and still remains un-fixed.

    These things need testing to destruction and more, something I feel is being neglected in the publishing process at present.

  • rate this
    0

    Comment number 1.

    To say it in bbc terms "This content does not seem to be working". Im on a windows rt tablet and get the same for desktop and modern version of ie 11 see deamandel.net/bbc for screenshots

 

Comments 5 of 12

 

This entry is now closed for comments

Share this page

More Posts

Previous
What's on BBC Red Button 18-24 January

Saturday 18 January 2014, 06:00

Next
Sochi Winter Olympics Index Launched

Thursday 23 January 2014, 16:11

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