New BBC interactive guides: responsive, dynamic and accessible web design

iWonder is the evocative name for the BBC’s new interactive guides. The name conjures childlike enquiry (I wonder!), ‘90s crisps (Golden Wonder) and fits nicely with the Beeb’s and Apple’s use of the stunted ‘iProductname’ format.

The guides are the BBC’s new content format, described as ‘sit forward’, allowing the user to learn by doing.

They organise video and audio, infographics, text and activities into stories.

I’ve been having a play with the guides and given some brief thoughts below. Do go and check them out, they’re a powerful tool for schoolchildren or older autodidacts.

By Ben Davis January 28th 2014 12:13

Explorable

At the moment, the homepage for WW1 on the BBC is not responsive to different screen sizes. Only the eight or so interactive stories included within it are, as they’re designed in the BBC’s new template.

Nevertheless this homepage works well on desktop as it’s only about two and a half screen lengths. I find this infinitely preferable to infinite scroll that defines HTML5 experiments such as the New York Times’ Snowfall.

On desktop, the homepage represents a central point that is necessary for study of a subject, meaning users can return to the homepage to attack another topic or resource when ready.

Clicking into the interactive guides (see below) reveals much longer pages, but these are aided by a dynamic navigation at the top.

The navigation changes as I scroll on desktop, highlighting which section of the content I am looking at.

On mobile, this is replaced by a black marker in the scroll bar, to show where I am.

One can also select a dropdown menu on mobile, which gives navigation options.

Tapping the top of the screen when scrolling will always take you back to the top of the page.

At the end of a particular page of content, rather than returning to the homepage, there’s the option to choose ‘where next?’

This is sort of an abridged homepage in the footer and aids the learner in knowing where to branch off to next.

This helps particularly on mobile, where users may be averse to returning to the non-mobile optimised WW1 homepage.

(Click to enlarge)

Accessibility

One expects BBC websites to be accessible and indeed the interactive guides are.

Transcripts of audio can be downloaded as PDFs.

Text size is nice and big at 100% for all readers to enjoy, but zooming and text recognition works, too.

Like all BBC content, you can tab through and use your keyboard if you can’t use a mouse. The content is compatible with most third party accessibility software and allows for switch use, etc.

As usual with the Beeb, the links are fairly easy to find in the footer providing a wealth of information on accessibility.

Format rich

Learning styles differ. These interactive guides include text, but not an overwhelming amount, as well as photographs, infographics (with suitable metatags), film and audio.

Here’s an example of some visualisations.

Consistent

Although some of the content further down the guide’s non-responsive homepage links to iPlayer and older BBC articles and information, the main eight interactive stories are consistent.

They use the same template and style, which means users will be comfortable exploring the content and won’t have to learn how to interact with each page.

Responsive and dynamic

Andrew Pipes wrote a great blog about how the BBC has designed the guides across devices. Here are the highlights.

The ‘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.

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.

The challenge

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.

Response times

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.