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

Killing Some Bad Layout Conventions

December 8, 2007

As good design further penetrates the Web, once highly-regarded conventions fall into disfavor and are replaced by more effective ones. Yet some flawed conventions persist. In fact, they persist on some pretty high-profile websites; to their detriment.

In this article I’ll examine a couple of these inferior Web design conventions and expose their flaws. I’ll then suggest more effective alternatives to these conventions and explain why they work better.

3 Columns Done Wrong

One of the early popular layout conventions for Web pages was the centered 3-column layout. This layout consists of a main content area bordered on either side by narrow sidebar columns. Despite the inherent problems with this sort of layout, it caught on fast and remains a popular choice for blogs and online retail. It also became and remains quite popular as a default layout for many content management systems.

centered 3-column layout

Design fundamentals reveal this layout to be deficient in several ways. Due either to a lack of designer or owner discrimination or understanding, or perhaps simply due to laziness, this layout remains common even today.

Sites Using Centered 3-Column Layout

So what are the flaws? In order to better understand them, it is helpful to first examine some of the supposed benefits to the centered 3-column layout.

Supposed Pros

But these supposed benefits are not often beneficial at all. The reasoning behind them is based on a certain ignorance of design and usability. When you take design fundamentals and the corresponding facts of human perception into account, the flaws appear.

Definite Cons

Given these usually relevant and always compelling issues, it makes little sense in almost any case to use a centered 3-column layout for Web pages. It’s time to retire this deficient and problematic layout and reserve it solely for its best use: cases where design and usability are not important—or you don’t want to pay a designer to craft something that’s actually effective.

For Example:

Here’s a simple, easier to use iteration of the Apple Store main page. Compare this with the current Apple Store.

Apple Store redux

Also, you might want to see how I chose to redux Amazon.com and mitigate the problematic centered 3-column layout.

How Deep is My Silo?

When done well, newspapers can represent some the best examples of information design. When your sole purpose is to present loads of textual/graphic information to be consumed in-full by everyone, you get good at designing for just that or you perish in the marketplace.

When newspapers and other print publications took their products to the Web, they were armed with what they thought was relevant design expertise. But this theretofore expertise turned to hubris when they failed to accurately recognize the constraints of this new medium. Their design and layout experience caused them to hold precious their deep columnar silo approach to sectional information presentation.

Examples of poor online main page (index) layout:

While many publications have caught on to the differences between print and Web media, the results of that initial hubris survive even today with many publications taken online. It is common to find news or magazine website main pages laid out in narrow vertical columns for sectional or contextual organization. This convention is almost always problematic, as the following facts point out.

In print…

For online newspaper/magazine main pages…

When news main page sections are laid out in vertical columns of varying heights placed side-by-side it requires that a reader practice one of 2 irritating methods of content consumption: 1) scroll downward to scan a column’s or section’s content and then go back up to do the same with another column or section, or 2) scan horizontally across adjacent columns of differing contexts, then scroll down and repeat the process, etc…

The first option is tedious and requires that we scroll up and down a number of times in order to consume the page in a contextual manner. The second option requires that we must examine part of 2 or 3 or more different departments/contexts, then scroll down to get the rest of some of these sections while introducing new departments/contexts. This option involves contextual schizophrenia.

horizontal scanning issues

The best method is to acknowledge the horizontal nature of the medium (especially with regard to information-rich indexes online) and lay out your departments and contexts in a horizontal manner. Horizontal browsing of information is far more comfortable for people than is vertical browsing of information (when reading). This allows readers to consume the entirety of one or more departments’ offering(s) and then scroll down for a different sort of information. With this method scrolling can become basically a one-time affair and there is no contextual dissipation of information.

Examples of better online main page (index) layout:

Examples of excellent online main page (index) layout:

MSNBC

Verbatim online mimicry of print media ignores vital differences in medium. New media is not new any longer and this sophomoric layout practice should be ended. So long as online newspapers and other publications continue to hold precious the idea of visual similarity to printed newspapers, they will fail to best serve their readers. Online publication designers should start being designers rather than legacy form production artists.

Conclusion

Every new medium or environment brings opportunities for missteps, and it is inevitable that initial efforts in these environments will utilize practices that are later found to be lacking. This is the case with centered 3-column layouts and vertically oriented columns in news index layouts.

With the examples of clear problems inherent with these (and other) layouts, it suggests that we designers should ever reexamine things we typically regard as standard practices. Making a regular practice of regarding any given medium or environment as a new frontier rather than one fully explored, it becomes easier to be a real designer and to actually do our job.

These examples are, like most of our design issues, contextual in nature. When we first pay attention to contextual matters, designing for any given medium or circumstance becomes easier and mistakes like these are easier to avoid. I sincerely hope that the problematic example websites cited in this article are fixed soon for the benefit of their users/readers/customers. But if they’re not, it certainly provides more opportunities for their competitors. Such is the nature of the marketplace.

You should follow me on twitter

Archives

Archive

Practice