Design View | Articles and opinion on design professionalism, technique and culture by Andy Rutledge

Fox News Redux

May 22, 2006

In television news, there’s FOX News and then there’s everyone else. FOX News dominates, leaving the rest of the cable and network news stations to lust after its ratings and audience. Go online, however, and FOX News doesn’t just slip, they plummet to the bottom of the heap of TV news sites.

I think it’s relevant to observe that while I’m a FOX News junkie as far as TV viewing habits go, I simply refuse to spend any time on their website. There are just too many far better news sites out there to warrant visiting FOX News.com. I have to imagine that with their huge television audience numbers there would be a fair number of website visitors as well, but if so it’s not due to the site’s structure, readability and usability. On those points, the site simply sucks, to coin a phrase.

I’ve spent the afternoon cataloging what I see as the major problems with the site’s main page and creating one possible solution to those issues with a re-imagined design. As with all of the “redux” articles, the redesign I that I propose is largely arbitrary in the aesthetics, where my main objective is to otherwise address the specific design, information architecture and usability problems that the current page presents.

As an aside, this site uses the same color scheme as the White House site, so the redesign solution presented here will obviously bear some color resemblance to the last one presented in the “White House Redux” article. Eh, them’s the breaks.

Problems at the Beginning

The page gets off to a poor start with the way that the site brand and main navigation are presented. In fact, those elements don’t even start the page. Instead visitors are greeted with advertising and ad-look-alike elements at the top of the page. These elements basically prevent any chance of our knowing where we are without having to hunt and read stuff for a couple seconds.

header area

The most dominant thing on the page is the large banner ad at the top. It’s hard to tell, but most of that stuff on the right is links to FOX News content, but it sure looks like advertising to me!

Once you wade through the ads and ad-like elements, it’s clear that the brand and main navigation scheme is problematic. I think FOX did their best to see just how much information, text, imagery and ads they could cram into the space in and around these elements.

navigation and branding

The brand almost disappears in the cacophony and their much-beloved tagline looks more like another ad or something other than a brand element. The search widget is poorly placed and in far too close proximity to the logo.

The navigation — main and programming titles — is a bit too cramped and it tends to blend in with all of the too many other elements in this area. All in all, the header of this site offers nothing short of a claustrophobic experience. I’m finding it hard to breath. Really.

Links

The fact that almost all of the link text looks like non-link text is problematic. Of course this is only true of most of the link text. Some of it is red, and there’s no indication of why this is. And then there’s the yellow/orange link text here and there...

Also, the form buttons throughout the page lack consistency of style. Some are red, some are gray and some are white.

It’s also worth mentioning that the code on this site is the worst kind of tag soup, with a mishmash of tables and divs, lots of inline presentation and style information, and scripts presented in-full in the page code.

This sort of link style schizophrenia harms the user experience and relates to a baseline usability trait that should always be done right. There’s no excuse for these errors here.

Structure and Color

Getting into the page content doesn’t present us with any more comfortable an experience. Part of the problem, I believe, lies with how FOX chose to translate its TV identity onto the computer monitor.

Their colors are red, white and blue and both their studio set and TV broadcast are boldly designed and dynamically presented. Their aesthetics are filled with high contrast elements and vivid colors. Lots of vivid colors. Their broadcast uses about 1/4 of the screen for dynamic text and image presentation while the video feed is airing. I guess this is their way of visually suggesting that FOX News is dynamic and hard-hitting.

Brought to the web page, this sort of aesthetic (complete with a few animated advertisements) is not very successful and just comes off as irritating and chaotic. They use so many images on their main page that, coupled with the vivid colors, it makes reading a less than pleasurable experience.

horizontal grid problems

The page layout and architecture leaves a lot to be desired. While there is something of a vertical grid, there is no sense of a horizontal grid at all. And this is a problem because the computer monitor is a horizontal window. When scrolling, online readers like to be able to consume text chunks in a horizontal fashion. This is one reason why a newspaper’s 2 or 3 column article layout does not work at all online. The lack of any sense of horizontal structure makes the layout fail on many levels.

Piling On

One of the odd features of the FOX News main page is the seeming redundancy of much of the content. There’s simply too much content here and a more economical approach would be less overwhelming and better suited to a main page of a content site.

Lastly, the awful tiled background image simply has to go. It’s trite, amateurish, and just helps to junk up an already junked-up page. It’s also worth mentioning that the code on this site is the worst kind of tag soup, with a mishmash of tables and divs, lots of inline presentation and style information, and scripts presented in-full in the page code.

C’mon FOX, if any sort of site can benefit from lightweight, elegant, standards-based coding it’s a news content site. Just think of the $ millions that could be saved on bandwidth costs alone!

A Solution

First, I think that FOX News should find a better, more contextual way to communicate their brand online. It wouldn’t be a bad start to actually make their logo conspicuous, rather than hidden, on the page. Then, let their tagline actually carry some weight and communicate. The searchlight background image in the upper left supports the brand, as well.

Fox News Redux mockup

 

View actual size mockup

I’ve placed the search and RSS elements at the top and made them clearly visible rather than shoe-horned in a crowded area or buried at the bottom of the page. Besides, if FOX pushed its RSS feeds more, its news consumers wouldn’t have to deal with the awful web page.

Main navigation and programming navigation are more clearly separated and more comfortably positioned. The navigation is also slightly de-emphasized by way of color and contrast, as most visitors will likely be using the page content links for navigation. Even so, the navigation is still conspicuous, clear and easily accessible.

Overall the presentation is more subdued, owing to the medium. It’s simply easier to read when the page is not a patchwork of highly contrasting colors and elements. Some bold colors remain, but now the content takes center stage rather than the garish headings, ads and too-many photos, as before.

Whether you agree with my arbitrary design decisions or not, I hope that you gained some understanding of the principles involved and are now better armed to deal with similar situations in your own work.

The ads are gone. They’ve no business on a main page and are much better presented with the article content – where readers will be spending some time, anyway. This way, the site offers a much better initial experience which raises the quality of the page, visitors’ estimation of the quality, and – therefore – the value of the site as a whole for advertisers.

Now there is a clear sense of grid and logical structure that further calms down the page and makes it seem easier to digest. The clear horizontal divisions lend clarity to the act of scrolling for more content. Furthermore, the subtle contrast of certain sections with the use of background colors or heading shade differences offers some semblance of priority to the content.

I’ve gotten rid of most of the redundant content, opting for economy. So, the page is nowhere near as long as before (1800px as opposed to 3972px!!). Part of why the page is shorter is that it is now wider. Before, the content occupied a space 770px wide (not counting the box on the right). Now the page is 972px wide with a desirable 1000px wide page, to show the upper left background image.

I deliberately left off the info-junk at the bottom of the page, but suggest that it, too, could be presented better.

Conclusion

I believe that the overall result of this exercise presents a much more readable, usable and enjoyable experience for site visitors. More to the point, many of the glaring problems present in the current FOX News site were, I hope, successfully addressed. I also hope that the solutions were presented in a way that was instructive and provided insight into some design fundamentals.

Whether you agree with my arbitrary design decisions or not, I hope that you gained some understanding of the principles involved and are now better armed to deal with similar situations in your own work.

As with the other redux articles, this should not be considered a viable redesign effort beyond the specifics cited. For a real redesign, I’d have to have loads of information from the client and the users, as well as relevant market and media information gathered in a comprehensive discovery process in order to arrive at a successful solution. This was only an exercise.

Archives

Archive

Practice