More to the Web Page Than Meets the Eye Mouseover design trend hides content to result in less cluttered home pages.
By
Steve Outing
(May 14, 2004) -- I've complained before about news Web site home pages: They're often too cluttered and confusing. There are too many clicking and viewing options vying for attention. It can require multiple scrolls to view all the offerings on the page. On many there's not much of a focal point for readers (the page index syndrome).
Some major sites have responded to the problem by trimming back the clutter in the last year. But perhaps there's a solution in the concept of hiding content behind layers -- having lots of content on a home page, but much of it not being visible until users pass a mouse over a trigger, which reveals what's underneath. This seems a logical way to reduce the news home-page mess.
Flyout and Fly Right
What do I mean by hidden content? The most common approach is the mouseover-flyout navigation bar or column. MSNBC.com has been using flyout menus on its left-column navigation for years. Mouse over "Business" and out to the side pop headlines for stories, and below that sub-categories that reveal a third flyout layer of headlines when moused over.
While mouseover navigation is not in use at the majority of news sites, the technique is more common among corporate and commercial sites.
For an extreme example, let's look at CJOnline.com from The Topeka (Kan.) Capital-Journal. That site takes the mouseover concept further on its home page than any other in the news trade. It uses DHTML, or dynamic HTML, to achieve this technique.
First, there's the obvious use of flyout navigation on the left side. But that's just the start. The Breaking News area on top of the page defaults to showing several headlines for Local. Slide your mouse over US and World and the headlines in that same spot morph to national and international stories.
Under the central art element (270 x 200 pixels) promoting the top news story are four tabs: News, Sports, Features and Special. This is the mouseover element that most pushes the envelope. Mouse over one of those tabs and not only does the main photo and headline change, but also the headlines to the right and three logo/promotions to other affiliated Web sites of CJOnline (often sponsored by a local business) underneath.
Further down the page, the mouseovers are used in a box featuring three content areas: Video, CityGuide and In-Depth. Move your cursor over the tabs and the box below changes. Below that box is another, with mouseover content changes for Forums and Survey.
Addressing Overload
Jim Debth, new media director at the Capital-Journal, says that the impetus for CJOnline.com's current design was the issue that afflicts so many home pages: too much clutter. The left rail of the old site, for example, contained 40 or 50 links. "It was my contention that few people are going to look through that," he says. The design team brought together tried to think from scratch and figure out how to deal with this problem.
The principal design philosophy with the site is that there are multiple entry points to content. A site visitor can take the normal approach of clicking on the Sports link in the left-column navigation which leads to a typical sports section front with links to that day's sports coverage. Alternatively, the visitor can stay on the home page and see sports content simply by moving the mouse over the Sports tab. Below the dominant photo/art package, top sports content of the day is revealed.
Staying on the home page but getting a richness in choices is important, especially for users who are still on slow dial-up connections to the Internet. Research such as the Poynter-Stanford Eyetrack II study (2000) showed resistance by Web users to click down into a site unless they were really certain that the content was worth the effort. The mouseover-reveal technique keeps these users more engaged in the site.
The hidden-content format allows for quite a bit of content on the home page. Within the top section of the page, editors can fit in around 50 articles, explains Debth.
CJOnline.com Head of Operations Phil Thompson says that when the current design was introduced -- about a year ago now -- initial reaction was about 50/50 for and against. But people grew to like (or at least accept) it once they got used to it. It was, after all, a dramatic change from the previous design -- indeed, a dramatic change from what people are used to finding on most sites.
Others More Cautious
While CJOnline.com takes the hidden-content concept to an extreme, other sites have taken a more austere approach. Other than the more common navigation flyouts and mouseover-expand banner ads, some sites use the technique to highlight more than one dominant story on the home page.
For example, Comcast.net, a portal site for Comcast Internet-access customers, highlights several top news stories and features of the day in a single position. A central art element with headline automatically rotates to reveal another story after a few seconds. There's also a VCR-like control at the bottom that you can use to control the rotation. This is a nice method of giving prominence to more than one special feature without taking up lots of computer screen real estate. The auto-rotation feature ensures that the "hidden" features will be seen, even if a user doesn't think to click or mouse over the control to advance to them.
AugustaChronicle.com does something similar on its home page. A central art element promotes a top story. On top of a gray box are three tabs: "National," "Sports" and "Local." Clicking on those tabs changes only the photo and content of the box; the rest of the home page stays the same. Again, this is used to highlight more than one important story without cluttering up the page.
And ESPN.com, the popular sports site, takes the same approach with its home page's dominant art: Two tabs atop the main photo -- Top Story and Photos -- change the content while keeping the user on the home page. Further down the page, the same treatment reveals Page 2, Page 3, Insider and Fantasy content without leaving the home page. And below that, the same treatment again reveals content for Radio, Wireless, TV and Nation. ESPN.com also uses elegantly done flyout navigation in the left column.
The Experts Weigh In
Several top Web design and usability gurus had some criticisms specifically of what CJOnline.com has done, but in general they lauded the idea as a worthwhile approach to dealing with home page clutter.
Roger Black, one of the world's leading publication and Web designers, cites the hidden-content approach as "a great example of using time as well as space in design of a news Web site."
He points out that many news sites' home pages suffer from having been designed by people who tend to think of a Web page as a printed page -- they want to put everything on it that they possibly can. What's bizarre is that in the "old days" of the online services, back in the mid 1990s, the thinking was different. In lower-bandwidth times, pages were more compact, but over the years as news sites became more sophisticated and content-rich they became more bulletin-board-like -- dull indexes of what's inside. Black also laments that online news staffs have been reduced over the last few years, with "designer" being a position that often got a pink slip. As a result, news site design isn't as innovative as it should be.
Andrew Devigal, an assistant professor at San Francisco State University and proprietor of Devigal Design, says that what's new here is deploying the hidden-content model of page presentation to editorial content. Previously, site designers have limited it to service-oriented content such navigation and advertising. Commercial Web sites (especially auto sites) also commonly use mouseover techniques to cram a lot of content into a small space. Overall, "I think this is a good step" for news sites, Devigal says.
Criticisms
There certainly are problems with the hidden-content approach. Web-usability guru Jakob Nielsen says that CJOnline.com, for example, doesn't truly solve the clutter problem; while on first glance the page is more compact than most, there's still a ton of content there. He thinks CJOnline.com's home page has some serious usability issues because of the mouseovers. As you move your mouse around the page, things change; there's a lot of "flashing" going on that's distracting and doesn't aid in comprehension of what's on the page. Passing your mouse from one point on the page to another, you can set off content changes that you don't expect and that are startling, Nielsen says.
The central part of the page that contains a dominant art element and headline, with four tabs underneath, probably changes too much content at once. "As a user, you have to go on a treasure hunt on this page," Nielsen says. He also thinks that the tabs should be on top of the photo instead of below because tabs up top are fairly standard on the Web.
A better way to use hidden content may be in what Nielsen calls "progressive disclosure" as a way to reduce page clutter. For example, consider running a very abbreviated caption with a photo that when moused over expands to reveal more text. This gives readers who really care to learn more about a photograph a quick way to call up an extended caption, while giving only abbreviated information to those less interested -- and saving screen space. The same technique can be used with thumbnail or small photos, which on mouseover expand. (This latter technique partly addresses the small-photo syndrome that I complained about in last month's Stop The Presses! column.)
Another shortcoming to CJOnline.com, says Nielsen, is that some content is too hidden. For instance, to see the top sports headlines of the day, you have to move your mouse over the Sports tab underneath the main photo on the home page. If you don't know to do that, then you don't see any sports headlines at all. A better approach, perhaps, might be to highlight a couple of sports headlines and have a mouseover trigger that expands to show more stories or photos.
Don't Forget to Group
Steve Krug, a Web-usability expert and author of the book Don't Make Me Think, says he likes the general concept of hidden content, but the trick is in getting the implementation right. An important point is to group content that changes on mouseover. A problem with the CJOnline.com home page is that the central-story element tabs change several blocks of content covering a large portion of the screen. This would work better if the area that changes was better delineated, by being in a box and/or with a color screen unifying the area that changes with mouse movement.
Another implementation trick is to code the page such that there's a slight delay before content changes on mouseover. If the user is simply moving the mouse over an area while heading to another part of the page, too fast of a trigger can be very confusing to the user. It's best to have enough of a delay that simply passing over something quickly won't cause the content to change.
This is especially important for mouseover-expand navigation menus, says Krug. What you don't want is for the user to briefly move the mouse away from the expanded menus by accident and have them disappear. (And as Nielsen points out, pages using mouseover techniques can be particularly vexing for people with motor disabilities and elderly people.)
To Click or to Mouse?
One last point: mouseover or click? That is, is it better to reveal hidden content with a mouseover action, or to require a click to change a piece of content on the page?
Sites like ESPN.com and AugustaChronicle.com both include areas on their home pages that require a click on a tab to change content without leaving the home page. The problem with that approach, according to the experts I consulted, is that it's non-standard and thus potentially confusing to Web visitors. Users are accustomed to the idea that when you click on a link, you go to a new page.
Ergo, the mouseover-change technique makes more sense from a usability standpoint. A common convention on a Web site such as a small "+" icon on content that will change on mouseover might make it clear to users how to find hidden content, for example. Reserve clicks for instances when your site indeed will send the user to a new page.
As Nielsen points out, there's too much variation between sites that are experimenting with hidden content. Mouseovers may take one approach on site A, and an entirely different one on site B. Of course, that's always been the nature of computer interface design, he says. In time, the industry figures out what works best and eventually most everyone adheres to a standard.
In the meantime, experimentation is a great thing. Many of today's overcrowded, index-like news pages could stand some improvement.
------
Letters
To see readers' feedback on this column and others, please visit our Letters page.
-----
Stop the Presses Schedule
The Stop the Presses! column runs once a month. The best way to keep track of when I publish a new column is to sign up for free e-mail alerts here.
Steve Outing
(steve@poynter.org)
has covered the online news industry for E&P since August 1995. He is also senior editor at the Poynter Institute for Media Studies.
E&P welcomes your feedback and comments: letters@editorandpublisher.com.
By using this link, you agree to allow E&P to publish your comments on our letters page. To send comments not for publication, please use our Contact Us page.
RSS
More to the Web Page Than Meets the Eye
