As you have no doubt noticed, the ³ÉÈË¿ìÊÖ News website has had a redesign earlier on this week. My colleague Steve Herrmann has posted about this from an editorial perspective; as creative director of the project, I'm going to explain how and why some of the design decisions were made. (See also this picture gallery explaining the new site).
When the News website was launched in 1997, it was only 600 pixels wide.
It had tiny images, no breaking news, no and certainly no live streaming video. Yet it far exceeded the expectations an early internet user might have had as to how the ³ÉÈË¿ìÊÖ should deliver news online. Fast-forward 13 years through four major redesigns and we find ourselves in a very different online landscape, with a very different audience which has grown familiar with our design and format.
In the last couple of years, we've seen great leaps in our habits of consumption of content that are influencing web design now. Broadband and smartphone use have changed the speed and convenience with which we're accessing content. Social media services are also playing a part, changing how we communicate, share and manage our online lives.
Our redesign has taken into consideration many of these changes in behaviour, along with our findings from extensive user research and testing, to provide a better template to suit people's evolving needs. It's also a more flexible template which will allow us to implement features in the near future much more easily than in the past.
Navigation
The first thing you might notice is that the left-hand navigation has gone. A horizontal navigation now gives links to the same sections at the top of every page. This was one of the first - and certainly one of the most carefully considered - decisions made on the project, and one that we wouldn't have made without good reason.
First, there was the issue of how much horizontal space the left-hand navigation took up. Story templates and indexes (the front page, the Magazine index and the specialist indexes like business and politics) were always compromised by having 100 or so pixels taken up by a piece of unrelated navigation. Now we can offer larger images and galleries, videos and interactive graphics across the site.
Second, horizontal navigation has long been the standard method of navigation across the rest of the ³ÉÈË¿ìÊÖ and is an understood interaction that we were sure people would find easy to use.
To support this fundamental design change, we carried out a round of user testing, pitting the current site against one with identical content but a horizontal navigation. Users reacted positively across the board, some not even noticing the difference until it was pointed out to them. With this decision made, we were able to start the redesign of the whole site with a wider, blanker canvas.
Look and feel
Another major improvement to the site is the overall "look and feel" of all pages. We knew that altering the visual design of the site would be changing something familiar and easily used by many. But, as our use of the internet has changed in the past few years, so have our visual expectations.
Technical developments across the web have opened up new avenues for web designers, allowing design with finely-crafted typography for the first time. We worked with UK design luminary Neville Brody at Research Studios on establishing a new "global visual language" (GVL) to establish consistency in design and interaction across all of the ³ÉÈË¿ìÊÖ website. A more detailed post on this project, the processes used, its overall goals and how it's going to be rolled out across all sites can be read here.
Fundamental to the new GVL is bold, strong type and crisp, un-cluttered layouts. The gradients and textures of "Web 2.0" are gone, and everything is pared down to the minimum required for delivering news.
Words and imagery now sit confidently on the page, with few other distracting elements. Corners are straight-edged, not rounded. Buttons and other interactive elements are consistent and minimal. Everything sits rigidly to a strict baseline grid. Most of these changes might go un-noticed to the non-designers in our audience: we hope that's because they are comfortably finding stories free of distraction.
News front page and sections
Designing a news site's front page is a huge challenge, with dozens of internal and external stakeholders. It is the "shop front" through which many people start their journey and everyone has an opinion as to what should be in the window displays.
The ³ÉÈË¿ìÊÖ news website must highlight stories on a wide variety of subjects. The TV news output of a given week ranges from Panorama to Breakfast, and we have to present content of similar range on the site daily. We could have tried to satisfy everyone by giving each section an equal amount of permanent space, but that would make the site look far too much like a patchwork of wildly differing subjects. Instead, we developed a system to control the "volume" of subjects and stories.
In the previous design, the top story always carried the biggest image, with stories two and three taking smaller image sizes. This did not always work well if, for example, there were no strong images associated with the top story but, say, the number three story potentially had a great picture to go with it. We needed to create a template that was flexible enough to allow us to pick the right image size for the story, without being tied completely to its place on the page.
So now each of the top stories can be shown at different "volumes". A featured story can appear larger, with a picture or not, regardless of its place in the list of top stories. This allows a much broader scope for the index editor, who makes the decisions around what's being included on a day-to-day basis. For instance, a Glastonbury story can be shown with a large image, while a more newsworthy Budget story unfolds above it. The Budget remains the most visually prominent, and therefore the most editorially significant by its use of large, bold type.
These new flexible modules also bring more flexibility to section indexes. For example, the entertainment index can use image-based presentation for more of its stories, and the business index can use it for fewer. Images no longer need to be used just for the sake of it. This also frees up time where previously images needed to be sourced and cropped.
Another insight from user research was about scrolling habits. We'd assumed that nobody likes to scroll much on the web. After all, a rule common to most websites and web designers is to keep key content above the "fold". But we don't believe that's the case any more.
For instance, statistics show that a large amount of users use the "most popular" panel on story pages as their main way of moving around the site. Yet they weren't spending long enough on the pages to be actually reading more than the first few paragraphs. Instead, they were willing to scroll to a piece of navigation they were comfortable with.
With an incentive, users will scroll. If that proves a positive interaction, it's something that could become habitual. So rather than design our indexes and front page with everything at the top of the page, we are encouraging scrolling by putting richer content within stories and towards the bottom. In all our previous index designs, content became increasingly sparse as you scrolled. Large images appeared up top, but none were visible once they'd scrolled out of view. For the redesign, we've developed a consistent visually-rich "digest" that sits at the bottom of indexes.
Now a user can browse the main headlines, then scroll down to see many more from around the site. Rather than appearing as a footnote, they're given the same visual prominence as the main news of the day.
Story pages
Our previous template for articles was much loved, but could be improved. We know from user research that people are happy with the overall structure of a news article page, but analytics show us that the layout could be more effective.
Though the removal of the left-hand navigation gave us more horizontal space, we were apprehensive about using this as an opportunity to widen the story body. The current layout offers a comfortable reading experience with optimum type size and line length.
When we refreshed the site in 2008, some feedback suggested that the site's width should be stretched (flexible layout) and the user's browser size should set the line length for each individual. This has been a debate between web designers for many years. There are benefits and disadvantages to both approaches. Due to the complexity and unpredictability of page layouts, we have opted for a fixed layout so we can be sure everyone is seeing one consistent design
When our journalists create stories, they place images, fact-boxes and video and audio with an understanding of where they will appear to the user. To offer a flexible layout would lose that control, creating unpredictable layouts that wouldn't look great. Users can still view stories at a flexible width using an RSS reader, but for the "hi-web" version, stories need to be presented as well as possible.
The additional horizontal space does, though, free up space for bigger images and embedded videos. Special stories with interactive graphics can now sit across the full page width, allowing for richer infographics. And when the new space doesn't have a good reason to be filled with content, it remains blank, allowing the story to breathe.
Across the project, there was a concern that larger images, bolder headlines and more links could make pages overbearing. Having a column of white at the right-hand side of a story's body was one of the design decisions made explicitly to counter this.
A major change to the layout of story pages is the new placement of related stories and unrelated ones. In the previous story templates, links related to the story you're reading sit close-by in the top right. But our analytics show that not a lot of people are using those links. They act as a 'foothold', a familiar place of reference to read headlines of similar or earlier stories on the subject. But you can achieve that in a lot less space than we're currently using, with far fewer items. So the related links visible at the top of the page are now limited to four, and are embedded in the story body. For those who want to read in depth on a subject related to the article, the full offering of all related content now sits at the bottom, after the main story body.
Replacing the related links in the top right is a selection of modules promoting stories across the site. Around a quarter of you every day are now arriving at ³ÉÈË¿ìÊÖ News directly into story pages, after following a link from another site, such as a social network or news aggregation site. This means that many people are visiting stories, but not getting to see the main news of the day. With Top Stories prominently visible to every user, we allow for more 'sideways navigation'. People won't have to click back and forth from Front Page to story in order to read the stories of the day.
There are further modules beneath Top Stories, promoting the best Features & Analysis around the site, along with the ever-popular 'Most Popular' panel. In fact, it worked so well in the previous design you might ask why we didn't just move it to the top of this column.
If it's what people use and like, why not make it most prominent?
Well, it often consists of the quirkier stories on the site and is a varied mix. But people are finding this module easily anyway, and we wanted to still be able to communicate a sense of our own editorial priorities near the top of the page by picking out the key top stories of the day there.
Video
The integration of video content has been evolving almost as long as the site itself. Initially only very short clips were available, and at a very low quality. Their relationship to written stories was as additional, optional content. Over the years their quality has grown, as has their length. Now, thanks to the amazing work by the iPlayer team, we have an established format for long-form, high-quality programmes across the ³ÉÈË¿ìÊÖ.
But our integration of this content into News still had the legacy of it being added to the original structure of story pages. Video clips were embedded in story pages, or could be viewed as what we call "media asset pages" (MAPs), but these hadn't been created based on how people were using video or what they wanted from it. Now the MAPs have been purpose-designed to allow a richer media experience, using some of the interaction patterns from iPlayer.
Many people enjoyed navigating sideways between videos using the "most popular" panel, so we've made more of this. 15 videos are now browsable in the vertical carousel that sits at to the right of each clip. Additionally, we used our insight about users not necessarily being averse to scrolling again. If the user is viewing video content, and wants to watch more, he or she can scroll down to direct links to dozens of them, presented with images and divided by subject matter. And of course, a major aspect of these redesigned video pages is that the video itself is now significantly bigger.
Adverts
While the UK news site is licence-fee-funded, the international version is funded by advertising via our commercial arm, . Through investment from ³ÉÈË¿ìÊÖ Worldwide, we were set the dual challenge of creating an ad-free UK site layout which can seamlessly integrate and showcase advertising for the international audience. There aren't many other sites that have to produce content that appears so differently to people depending on their location.
One ad format proved difficult to implement, as its size would affect the whole structure and gridded layout of the site. So we devised a flexible layout, which stretches the right-hand column when a large ad is served. Like many of the improvements, it's something most of the audience will barely notice, but it was an essential problem to solve in order to offer the international version of the site to advertisers as a competitive commercial product.
The future
We have more exciting things in the pipeline. This template allows us to incorporate them easily, and to continue to adapt working alongside our audience. If you have any further questions about our design processes or why certain decisions have been made, feel free to ask them below and we'll try to answer them. Please bear in mind, though, that what you see today is just the first step.
Paul Sissons is UX Team Lead, ³ÉÈË¿ìÊÖ Future Media & Technology
| 14:54 UK time, Wednesday, 28 July 2010
