The ABCNews.com Redesign: a Cautionary Tale
ABCNews.com launched a massive redesign of its website April 28th, touting more video and new “citizen journalism” features. The site uses the latest Web technology to deliver a dynamic, feature-rich experience to visitors… so why do so many of them hate it?
The new ABCNews.com design (click to enlarge)
Since launching, the new site has gathered hundreds of angry complaints in its user comments section from readers that can’t stand the changes. Whoever was responsible for this redesign1 made three fundamental, but surprisingly common, mistakes:
- Putting gee-whiz technology ahead of real people.
- Adhering to outdated and discredited Web design philosophies from the mid-1990s.
- Misunderstanding or ignoring the usage patterns and fundamental interaction metaphors of the Web (in English: treating the Web like TV or print).
My Point (and I Do Have One…)
The purpose of this article isn’t to shake my finger at ABC News or to call out the company who did the redesign for shoddy work. For all I know, they may have been pressured by ABC to produce the results that they did.
My goal is to examine the root causes behind the flood of reader complaints, and put them in the context of what people expect from the websites they use. Giving your customers what they want and expect—such as fast load times, ease of use, and the ability to find you with Google—can only be a good thing for any business. As such, this article is both an object lesson and a cautionary tale: don’t let this happen to your website.
I’ve tried to write this in a way that’s accessible to a broad audience, but some technical stuff is inevitable when you cover these topics. To make my life easier, I’ve assumed a certain level of knowledge about common Web technology. If any of this goes over your head, just pipe up in the comments and I’ll respond with further explanations.
Throughout this post I’ll be quoting some representative reader feedback from the ABC News site to illustrate my points. Unfortunately, there’s no way to link directly to individual comments like these. You can find literally hundreds of similar complaints, however, by browsing the community comments on the article “A Guide to the New and Improved ABCNews.com.”
UPDATE (5/2/2007): Images added to article.
Mistake #1: Making Technology More Important Than the Customer
Its hard to find anything and intensely distracting. My god just because the technology exists to dynamically change things doesn’t mean its a good idea to use it. Every couple of seconds something changes on the page. Distracting! Terrible!
— comment by “RoyJames113”
ABC News seem to have drunk so much of the Web 2.0 Kool-Aid that they’ve lapsed into a sugar coma. All the dynamic content and animation on their new home page comes at a hefty price: about 272 KB of JavaScript2 must be downloaded the first time a visitor hits the page.
Once all that JavaScript has arrived, those scripts begin the process of downloading the actual news content and images. That’s right, the home page doesn’t even have any content until the scripts work their magic. This same combination of JavaScript gluttony and a completely content-free initial page load also afflicts the front page of every section in the site.
Life in the Slow Lane
Using the Firebug extension for Mozilla Firefox, I was able to monitor both the initial file downloads for the site and the subsequent script requests that pull content into the home page. Here’s what I discovered when loading the page with a clean browser cache:
- Total download size: 996 KB
- Total download time over a 7 Mbps cable modem: 1 min., 32 sec.
A minute and a half is longer than anyone with broadband should have to wait for a website.
Every page is slow-loading, even with cable internet.
— comment by “werled”
UPDATE (5/20/2007): It’s worth noting that some extremely popular sites such as Flickr actually use more JavaScript than the ABC News website. The reason ABCNews.com feels slow is because it’s poorly optimized. In the spirit of constructive criticism, here are seven things ABC could do to make their site faster.
What Is This “SEO” You Speak Of?
As I mentioned above, the home page and all section front pages contain no content when they first load. Instead, all the headlines and images are pulled in via JavaScript. This is terrible for the site’s search engine optimization (SEO), since search engines like Google don’t execute JavaScript code when they index pages.
Browsing with JavaScript turned off? Enjoy the empty boxes! (click to enlarge)
The navigation links at the top of the home page don’t help this SEO problem, either: all of those links go to the front pages of other sections, which share the exact same kind of JavaScript dependency.
The site offers a link to a “text version” if you have JavaScript disabled, but this page provides a disappointingly tiny sliver of the site’s content. The same alternate version is offered on the home page and all section front pages, rather than having a distinct JS-free page for each section. Not only is this a missed opportunity to diversify the content that’s accessible without JavaScript, it ends up being another way that ABCNews.com seems determined to shut its doors to Google and other search engines.
UPDATE (5/2/2007): The News Summary link is now the only main navigation link that leads to a non-JS-dependent page. This link was somewhat obscure in the original design, and has been made more prominent in response to user complaints. Unlike the text version, the News Summary does include content from all sections. Only the latest ten stories from each section are offered, however.
Mistake #2: The Page Layout that Time Forgot
Although the JavaScript fetishism of the new ABCNews.com is bad, the biggest source of reader complaints is the new home page layout.
The people in charge of the redesign seem to have bought in to the old belief that everything important on a Web page should be “above the fold”—in other words, visible without scrolling. Ironically, the lack of scrolling is one of the biggest recurring complaints voiced by the site’s users since the launch.
[CNN] allows you to scroll down to see additional articles. ...The reason this design is bad is that with the scroll down approach, you are more likely to catch an article in a section that you normally don’t read. ...This is a big step backwards and feels like a feeble attempt to shove what news you think is important down my throat.
— comment by “ewe3242”
The belief that above-the-fold content is important in Web design has proven incredibly durable, despite all evidence to the contrary. Usability guru Jakob Nielsen is partly responsible for this. Some of his earliest studies of Web usability indicated that users weren’t aware that scrolling a Web page was necessary or even possible; naturally, he warned Web designers against allowing pages to scroll.
Nielsen started reversing his position in 1997, when new data showed that people had gotten comfortable with scrolling as the Web became a more familiar medium. The latest studies from User Interface Engineering (2004) and ClickTale (2006) take this evolution a step further, revealing that today’s Web audience can actually be more productive on a longer page.
Like the plaid flannel shirts collecting dust in my closet, some things from the ’90s are best forgotten. The usability researchers and ABCNews.com readers agree: it’s time for above-the-fold page layouts to retire.
Mistake #3: Breaking the Page Metaphor (into Tiny, Glass-Like Shards)
A Brief History of Web Interaction
Web design has evolved and matured over the years as technology and techniques have improved. In the very beginning, however, two fundamental interaction metaphors existed for websites: the page and the link. As far as we’ve come since the Web’s birth, these two central ideas remain hard-wired into the brains of Web users and central to the medium itself.
The page metaphor is a simple one that’s easy to work with once understood: the Web page itself is like a sheet of paper that you slide around beneath a picture frame, exposing as much of the page at once as the frame allows. The link metaphor was the more novel of the two, but also incredibly simple and powerful: click a link, and you get a new page. Although the new genre of Web applications3 is starting to create new interaction metaphors of its own, the link and the page remain the twin pillars of the content-based Web.
How ABC News Eliminated Scrolling… by Adding More Scrolling
Like almost any content-based site, ABCNews.com maintains the integrity of the link metaphor. But the ways in which it mangles the page metaphor are so awkward that it’s downright hostile to users.
The home page and section pages use an aggressively above-the-fold design to avoid scrolling, but the site’s extensive news coverage produces way too much content to fit in such a small space. The “solution” that they’ve employed is to break the page up into smaller, individually-scrolling sections.
The result: not only does the page not scroll as expected, but the reader must also find and interact with smaller scrollable regions of the page to find the content they want. By breaking the page metaphor and working counter to user expectations, ABC News forces a visitor to stop and decipher how the site expects to be interacted with. Instead of offering an easily-scanned layout of current news stories, the new site makes customers work for the information they want.
This is bad design, plain and simple.
The new format focuses on looks more than functionality (readability). Why have multiple small content areas on a screen which I have to scroll through individually? in such a small space? I HATE only being able to see headlines from 4 to 6 stories in an ITTY BITTY LITTLE BOX. The old way, I could glance at the headlines full screen with the extras in the side columns, not taking away from my browing/scrolling.
— comment by “RayBowers”
More Commentary from Others
I’m not the only one who’s mystified by the ABCNews.com redesign. Here’s what some other people are saying:
- Jon Henshaw of Sitening says, “Spending just thirty seconds with their new design makes it obvious that they designed it to punish the user.”
- Kent Newsome says, “...most readers are concerned about finding and being able to read the content they want, while too many web designers are focused on the 37 pieces of flair (many of them ads) that get in the way of that content. Users don’t want scrolling news tickers and they don’t want fancy, slow loading pages.”
- Michael Grossman of User Experience Arts says, “It’s amazing how much feedback goes to the opposite of their business objective of simplifying the design. So many said the page looks more cluttered AFTER the redesign.”
- Greg Storey of Airbag Industries hosted a discussion about above-the-fold design on his weblog, Airbag. Much of the information used to debunk this design myth comes from links offered in the comments.
What do you think? You can use the comment form below to share your opinions about the redesign or ask questions about this article.
UPDATE (5/14/2007): Michael of UX Arts sent me an e-mail yesterday about a recent change to ABCNews.com. They’ve made the front page taller by a whopping 107 pixels (about 1.1 inches on most monitors)! Unfortunately more than half of that extra space is dominated by advertisements, not the added content users have demanded. Michael has the full scoop, with pictures.
UPDATE (6/24/2007): Michael continues to track the strange mutations of ABCNews.com over on UX Arts. They’ve recently made still more room for advertisements, a little more room for content, and mucked around with borders and spacing. To catch up on the latest, see his posts with the “abcnews.com” label.
UPDATE (11/10/2007): In July, interaction design journal Boxes and Arrows published an article debunking above-the-fold design as a viable model. The author, Milissa Tarquini, uses her experience building websites for AOL to give solid examples of how well longer pages can perform.
Footnotes
1 Either the agency ABC hired for the job, or network executives that were arm-twisting said company.
2 JavaScript is a programming language that can add animation and interactivity to a website. Applied in moderation, it can make a site easier and more enjoyable to use.
3 One good example is Google Docs & Spreadsheets, which functions like a cross between a traditional website and desktop office applications like Excel and Word.
Comments (10 so far)
-
Adam, it’s so great to see others dissecting the redesign of abcnews.com. There is so much you can write about this effort and you do a great job here. What makes this a really great subject is that we have so much feedback from actual users that we as designers don’t usually get from other people’s projects. Your use of quotes from their own users after your major points is powerful. A lot of the feedback from regular users was so thoughtful and not just typical flaming.
So why did they make all these bad decisions? Did they do get any user feedback other than co-workers and relatives who didn’t want to say their baby was ugly? Why didn’t they BETA a lot of these Web 2.0 components piece by piece instead of going with a major relaunch? So many more questions. Nice work.
-
This is easily the most comprehensive and thorough breakdown of one of the worst modern redesigns ever made. Thanks for putting this together. It’s obvious that there wasn’t an interaction designer (with an eye for usability) anywhere in sight when this site was built.
by Jon Henshaw on May 5, 08:13 am
-
My major personal complaint is that I have not been able to login for over a week even though I have about 6 months left on my yearly subscription. I have sent several emails to abcnews but none of them have been acknowledged. I have heard of other frustrated users like myself, and I am wondering how many other paid customers have had their services cut off. What can I do to resolve this problem?
On the technical side, knowing that a global news site such as abcnews is being viewed by people all over the world with slow computers and slow internet connections, I would think that a great effort would be made to design a site as light and fast loading as possible. News viewers want searchable fast loading easy-to-read pages. How did the “redesign” of abcnews go so wrong???
Bernard Mendonca
by Bernard Mendonca on May 6, 08:55 am
-
I’m glad that this coverage is taking place. I’m passionate about intuitive web sites that understand the importance of the user experience. I smiled at the many comments here because obviously there are web designers that truly get it. Unfortunately ABC didn’t hire them. Yes the product is broken and ABC has failed their user base. I was actually one that signed up for an ABC account to simply air my complaints. I figured a really good MBA or product manager would hear this feedback and act. That didn’t happen despite the great user comments in the hundreds, a goldmine for those interested in customer feedback. But then again, I’m simply a product manager that apparently doesn’t get the marketing position that ABC has taken. I’m sure that their traffic has increased by attracting a new breed of users. Those addicted to the ‘social networking my opinion is the news’ mentality. Those that enjoy real news have left to other content providers. The brand image has completely taken a new meaning at ABC.
by Jonathon on Nov 8, 10:03 pm
-
ABC launched a new home page this weekend. I think they have learned their lesson from the previous design. The new home page is a step in the right direction. They are obviously moving towards a more streamlined, tired and true approach in the new design. Bravo ABC for your work on this new design.
by Dave Grippo on Nov 19, 02:42 pm
-
Any thoughts on the site now? Noticed it’s gotten even more manic-looking. Got a bit of ADD just contemplating it…but seems like they might have actually implemented some of what’s been suggested on this forum but the social networking mania is a bit overwhelming.
by Anna on Sep 18, 02:03 am