Wednesday, April 02, 2008
BBC News redesign: while developers ignore their users, the users fix the site!
Today Julia Whitney, "Head of Design & User Experience, Journalism", has posted a second response to the 1,500+ odd complaints about the new BBC News website. Most of it is disingenuous, fingers-in-ears "nah nah nah we can't hear you" fluff, but this part takes the biscuit:
"For those of you who mentioned flexible rather than fixed width, and concerns about the line spacing and the grey type - we'll take these themes into our next set of user testing and listening labs over the course of the next month and a half."
So it's going to take six weeks of "focus groups" to decide that actually, black text on white (as used by the rest of the entire print and internet worlds) is better than low-contrast* grey? Sounds more like a politician trying to hide behind excuses rather than admit they were wrong. And we all respect people who do that, don't we?!
Luckily you don't have to wait that long to fix the site, at least if you're using the Firefox or Opera browsers (IE users are out of luck). A site's design is dictated by something called "CSS", short for cascading style sheets, and these two browsers allow you to over-ride those rules with "local" ones.
What a developer on the userstyles.org website has done is develop a set of rules that "fix" the new BBC News layout. It removes the large black banner at the top and the big grey one at the bottom, sets the page back to left-alignment, removes much of the excess "whitespace", reduces the page width to something manageable, and replaces the grey text with proper black. (What it can't do is restore all those missing story links. Less content in more space. Crazy.)
If you're using Firefox, you first need to install the Stylish plugin. Then visit this userstyles.org page, install the new syle, and voila, a fixed BBC News website is yours to enjoy.
Opera users don't have to install anything new, but have a slightly more complex path to follow:
1. Open Notepad
2. Go to the userstyles page and click "Load as user script"
3. Copy and paste that code into Notepad
4. Save that file as "user.css" somewhere. Be sure to change the filetype from "Text" to "All" before saving -- this is very important
5. Navigate to BBC News in Opera and right-click on the page
6. Select "Edit site preferences" and then click the "Display" tab
7. At the bottom of that tab, "choose" the "user.css" file you just created
8. Click "OK" and enjoy a fixed BBC News page :-).
*I was interested to see if the new grey text broke usability standards, so did a quick investigation. Via 456 Berea Street I downloaded a contrast analyser. To meet minimum standards, text should have a contrast ratio of at least 5:1 and preferably 7:1. Black text on white has a contrast ratio of 21:1, but BBC News's new grey-on-white has a ratio of only 9:1 -- just above the standard, but still much poorer than black-on-white. Other areas of text, such as certain headers(!), have ratios as low as 4:1 -- well below the minimum.
The new site really is a joke. Hundreds of markup errors and it doesn't even meet basic usability guidelines.
"For those of you who mentioned flexible rather than fixed width, and concerns about the line spacing and the grey type - we'll take these themes into our next set of user testing and listening labs over the course of the next month and a half."
So it's going to take six weeks of "focus groups" to decide that actually, black text on white (as used by the rest of the entire print and internet worlds) is better than low-contrast* grey? Sounds more like a politician trying to hide behind excuses rather than admit they were wrong. And we all respect people who do that, don't we?!
Luckily you don't have to wait that long to fix the site, at least if you're using the Firefox or Opera browsers (IE users are out of luck). A site's design is dictated by something called "CSS", short for cascading style sheets, and these two browsers allow you to over-ride those rules with "local" ones.
What a developer on the userstyles.org website has done is develop a set of rules that "fix" the new BBC News layout. It removes the large black banner at the top and the big grey one at the bottom, sets the page back to left-alignment, removes much of the excess "whitespace", reduces the page width to something manageable, and replaces the grey text with proper black. (What it can't do is restore all those missing story links. Less content in more space. Crazy.)
If you're using Firefox, you first need to install the Stylish plugin. Then visit this userstyles.org page, install the new syle, and voila, a fixed BBC News website is yours to enjoy.
Opera users don't have to install anything new, but have a slightly more complex path to follow:
1. Open Notepad
2. Go to the userstyles page and click "Load as user script"
3. Copy and paste that code into Notepad
4. Save that file as "user.css" somewhere. Be sure to change the filetype from "Text" to "All" before saving -- this is very important
5. Navigate to BBC News in Opera and right-click on the page
6. Select "Edit site preferences" and then click the "Display" tab
7. At the bottom of that tab, "choose" the "user.css" file you just created
8. Click "OK" and enjoy a fixed BBC News page :-).
*I was interested to see if the new grey text broke usability standards, so did a quick investigation. Via 456 Berea Street I downloaded a contrast analyser. To meet minimum standards, text should have a contrast ratio of at least 5:1 and preferably 7:1. Black text on white has a contrast ratio of 21:1, but BBC News's new grey-on-white has a ratio of only 9:1 -- just above the standard, but still much poorer than black-on-white. Other areas of text, such as certain headers(!), have ratios as low as 4:1 -- well below the minimum.
The new site really is a joke. Hundreds of markup errors and it doesn't even meet basic usability guidelines.
Tuesday, April 01, 2008
The BBC News redesign disaster
Update: The BBC "responds" to the criticism so far, but actually fails to answer a single point made in the 1,400+ complaints now left on the BBC blogs.
Something very strange is happening in the BBC webdesign department. Usability rules and user experience testing seems to have been tossed out the window in a head-long rush to be new. The revamped BBC News website has so many problems it's hard to know where to begin. However a flavour of its reception can be gained from the comments to the blog announcement, which after just 30 hours has seen over 1,000 complaints about the site! That's despite the problems with commenting to BBC blogs due to their being locked into an ancient version of Movable Type, meaning that it takes minutes for a comment to finish posting, if at all.
Other BBC blogs, such as the BBC Internet blog announcement, have seen their comments turned off to hide from the deluge. Nick Reynolds says, in the comments below, that this was to herd the comments into one place, although oddly now there are at least three BBC blog posts on the topic with comments enabled. Make of that what you will...
So what's so bad about the site? Let's start with the mark-up. A w3c validation check shows 347 errors in the "XHTL 1.0" code. Three hundred and forty-seven! That must be some kind of record. Oddly, setting the validator to check against HMTL 4.01 shows only 81 errors. So it seems the BBC coders don't know the first thing about compliant code, or even which doctype to use.
(Update 2 April Martin Belam explains that the legacy CMS the BBC use could well be the cause of such bad mark-up.)
Their CSS fares better -- only five errors and 275 warnings against CSS 2.1. In fact their CSS performance is remarkably good considering the site has 54 kb of code spread over 8 CSS files.
(In total there are 140 seperate objects on the page, including another 54 kb of external javascript in ten files.)
More coding oddities include using pixels to specifiy font sizes rather than the standard ems, that a serif font is specified after verdana making the site rather ugly on many Linux systems, and the fact when the site first launched it didn't work at all in Firefox (tiny text), which opens questions about the BBC's testing procedures. (In fact the site is also broken on the iPhone.)
Other design changes seem odd. The new site is 1024px wide, but has 15% less content (primarily a reduction in the number of stories linked to from the main page, cutting links in the Around the World, UK, and Sections from two to one). This forces the user to scroll and eye-scan over a much larger distance in order to access less content. The space is taken up by increased padding around the remaining elements. I can't find a single design guideline that mandates that.
Despite ostensibly being based on a grid (pdf), very little on the page lines up. The left column, including the banners, features five different horizontal alignments (and six styles of text, including text-as-images). Included in that is the main BBC logo and the large BBC News logo immediately below -- they don't line up.
Vertically, the main and right columns fail to align too, with jumps in the horizontal dividers.
(The right column also features links to videos in the original Real Media format, despite claims that the site now uses embedded Flash video.)
Very little bolding is used for the headers, which for the minor ones depend on ALLCAPS. How very '90s. The reduced contrast and lack of background-highlighting makes scanning for seperate sections much more laborious.
Perhaps the strangest design choice though is the use of grey text, rather than black, on the white background. The reduced contrast makes the site harder on the eye and is one of the leading complaints to the blog announcement. To say that this goes against everything usability stands for is an understatement -- a triumph of form over function.
However the grey-on-white text must vie against the new pan-BBC header bar -- simply a black rectangle with two links and a search box. The search box doesn't indicate whether it's a site search or a web search -- maybe it's just pot luck? Originally there used to be links to the major BBC website sections such as News, TV, and Radio, but they've been swept away. Presumeably the BBC believes that users will instead type into the search box to access these sites, much as many web users now use Google as their "bookmarking" system. Hard to see how this increases site usability.
Overall the site is a disaster in both design and usability. During the recent BBC homepage redesign it was boasted that the site had been developed and deployed in only three months with a minimum of testing and usability studies. This trend of slap-dash, rapid-development seems to have spread throughout BBC webdesign.
Compare all this to their last redesign in 2003. Everything lines up. Consisent fonts are used throughout. The aim of the design was to show more information with less scrolling. Pretty much perfect! (For a flavour of the quite positive reactions that redesign brought, read this thread on Webmaster World.)
Perhaps the BBC have been drinking too much of the web 2.0 kool-aid. Agile programming, release early and often etc. Such memes might suit small, young companies such as 37signals, but not heavyweight players. How often has Google changed its homepage in the last ten years? Even much younger, fully "2.0" sites such as Facebook have stayed away from rushed redesigns.
The most ironic part of the whole debacle is that, in the original blog announcement, the BBC confesses that the majority of users they surveyed before the changes were made had said "leave the site alone"!
Something very strange is happening in the BBC webdesign department. Usability rules and user experience testing seems to have been tossed out the window in a head-long rush to be new. The revamped BBC News website has so many problems it's hard to know where to begin. However a flavour of its reception can be gained from the comments to the blog announcement, which after just 30 hours has seen over 1,000 complaints about the site! That's despite the problems with commenting to BBC blogs due to their being locked into an ancient version of Movable Type, meaning that it takes minutes for a comment to finish posting, if at all.
So what's so bad about the site? Let's start with the mark-up. A w3c validation check shows 347 errors in the "XHTL 1.0" code. Three hundred and forty-seven! That must be some kind of record. Oddly, setting the validator to check against HMTL 4.01 shows only 81 errors. So it seems the BBC coders don't know the first thing about compliant code, or even which doctype to use.
(Update 2 April Martin Belam explains that the legacy CMS the BBC use could well be the cause of such bad mark-up.)
Their CSS fares better -- only five errors and 275 warnings against CSS 2.1. In fact their CSS performance is remarkably good considering the site has 54 kb of code spread over 8 CSS files.
(In total there are 140 seperate objects on the page, including another 54 kb of external javascript in ten files.)
More coding oddities include using pixels to specifiy font sizes rather than the standard ems, that a serif font is specified after verdana making the site rather ugly on many Linux systems, and the fact when the site first launched it didn't work at all in Firefox (tiny text), which opens questions about the BBC's testing procedures. (In fact the site is also broken on the iPhone.)
Other design changes seem odd. The new site is 1024px wide, but has 15% less content (primarily a reduction in the number of stories linked to from the main page, cutting links in the Around the World, UK, and Sections from two to one). This forces the user to scroll and eye-scan over a much larger distance in order to access less content. The space is taken up by increased padding around the remaining elements. I can't find a single design guideline that mandates that.
Despite ostensibly being based on a grid (pdf), very little on the page lines up. The left column, including the banners, features five different horizontal alignments (and six styles of text, including text-as-images). Included in that is the main BBC logo and the large BBC News logo immediately below -- they don't line up.
Vertically, the main and right columns fail to align too, with jumps in the horizontal dividers.
(The right column also features links to videos in the original Real Media format, despite claims that the site now uses embedded Flash video.)
Very little bolding is used for the headers, which for the minor ones depend on ALLCAPS. How very '90s. The reduced contrast and lack of background-highlighting makes scanning for seperate sections much more laborious.
Perhaps the strangest design choice though is the use of grey text, rather than black, on the white background. The reduced contrast makes the site harder on the eye and is one of the leading complaints to the blog announcement. To say that this goes against everything usability stands for is an understatement -- a triumph of form over function.
However the grey-on-white text must vie against the new pan-BBC header bar -- simply a black rectangle with two links and a search box. The search box doesn't indicate whether it's a site search or a web search -- maybe it's just pot luck? Originally there used to be links to the major BBC website sections such as News, TV, and Radio, but they've been swept away. Presumeably the BBC believes that users will instead type into the search box to access these sites, much as many web users now use Google as their "bookmarking" system. Hard to see how this increases site usability.
Overall the site is a disaster in both design and usability. During the recent BBC homepage redesign it was boasted that the site had been developed and deployed in only three months with a minimum of testing and usability studies. This trend of slap-dash, rapid-development seems to have spread throughout BBC webdesign.
Compare all this to their last redesign in 2003. Everything lines up. Consisent fonts are used throughout. The aim of the design was to show more information with less scrolling. Pretty much perfect! (For a flavour of the quite positive reactions that redesign brought, read this thread on Webmaster World.)
Perhaps the BBC have been drinking too much of the web 2.0 kool-aid. Agile programming, release early and often etc. Such memes might suit small, young companies such as 37signals, but not heavyweight players. How often has Google changed its homepage in the last ten years? Even much younger, fully "2.0" sites such as Facebook have stayed away from rushed redesigns.
The most ironic part of the whole debacle is that, in the original blog announcement, the BBC confesses that the majority of users they surveyed before the changes were made had said "leave the site alone"!
