Retiring the 3 Column Layout

By on April 11, 2008 1:25 pm

In today’s blog post I’m going to be talking about one of the most recognizable layout models on the web today, its flaws, and some suggestions for retiring this old chestnut.

The traditional 3 column layout

The culprit here is the reliable fall-back of web layouts: 3 columns, with the main content centered. It’s used in a wide range of websites, from e-commerce to news outlets, and has become the default model for many content management systems. Although there are times when the 3-column layout is appropriate, more often than not the layout is abused, degenerating into a poorly implemented default.

In preparation for this posting, I did some research to see if the 3-column layout had received similar criticism from other people in the UI field. I found that I’m in good company, including Andy Rutledge, host of the excellent “The Design View Show” podcast (available through iTunes). Andy graciously agreed to share some of his views with me for use in this blog post.

Although primarily seen in the blogging world (where it is sometimes a good fit), you can still find this layout hiding on major ecommerce sites, even ones that are noted for their user experience optimization. These sites don’t rely exclusively on the three column model, but where it is used, it is often used to poor effect.

I spoke with Andy on the persistence of the layout, and why this particular model seems to keep popping up. He opined:

I think it became popular for many templating systems because it is an easy no-think layout. When a non-designer thinks about the likely sorts of page components (main nav, content, ancillary links/info), this would seem to be a good layout. Of course, the people coming up with this stuff are not designers and do not think the way designers must think.

A quick check of modern templating systems and WYSIWYG HTML editors reveals this to be precisely the case. The majority of web design apps and content management systems include this layout as an option. Of course it’s important to note that this layout model can be done right and isn’t in itself a purely bad structure. There are times when a 3 column layout will meet certain design needs, but overall this model appears much more persistent than its actual usefulness would dictate.

There is also a school of thought that argues for the aesthetic merits of the 3 column layout. I don’t agree with this line of argument at all, finding nothing implicitly exceptional about the model.

I asked Andy what he made of the argument that the three-column, center-focused layout just looks better than other layouts:

I think that anything that’s offered up by some company or organization that then becomes “standard” seems fine to most people–until someone shows them something better. It is a simple fact that designers must show people what they want before they know they wanted it.

He continued:

Showing people any design–even a really bad one–comes with a strong subliminal suggestion that it’s good, and people want to respond to this undercurrent of supposed quality to avoid cognitive dissonance; that uncomfortable feeling we get when our thoughts or feelings are not in harmony with what we think we’re supposed to think or feel. In short, people will gobble up any old tripe if they’re under the impression that they’re supposed to.

Another factor that may contribute to the popularity of the layout is simple familiarity. Interface layouts, from web pages to software applications, have a way of propagating themselves based on the notion of user expectations. Designers rightfully take a look at the existing status quo when creating an interface. There is always a temptation to not stray too-far from established norms, sometimes in the name of meeting user expectations, and other times for fear of creating a jarring user experience. But for UI designers, one of our implicit jobs is innovation. A good design can radically depart from expected norms, so long as it improves the overall user experience and helps the user in reaching goals.

Though the 3-column layout is much more prominent in basic websites than in web applications, it does make a regular appearance on hybrid sites like social networking platforms and news aggregation apps. The relative merit of the layout in these settings depends heavily on context. In order to generate revenue, advertising driven sites do need a place to stick their advertisements, and sometimes that third column fits the bill. However, for dedicated web-apps, the same interface issues pop up, especially since users are much more goal oriented in the application context.

I asked Andy if he thought the same principles applied to web applications, not just static web page layouts:

…the rules of usability and the tenets of human behavior and interaction become magnified with applications. Because unlike a simple website, an app is something that people must use to accomplish something. They have goals that the app is supposed to facilitate.

Home run on all fronts.

So what exactly are some of the problems with the layout?

Taking a look at the guts of the model, I came up with some critiques that overlap and complement Andy’s own findings.

  1. First, the 3-column layout supposedly draws user attention to the central content area, but in practice this is not the case at all. The placement of the content area between usually-cluttered sub-navigation and random sidebar content actually diverts focus from the main content and adds distraction to the user’s field of browsing.
  2. The layout lends itself to lazy content additions and creates visual pressure to fill the columns with “something.” This often results in too much link / text noise, as content managers populate empty column space with content that does not optimally meet user goals.
  3. While the navigation column is usually maintained from page to page, the ancillary third column is usually unpredictable in nature. This forces users to re-analyze the ancillary offerings of the third column in order to learn what links and features are available on each page.

All of this should again be followed with a caveat: with discipline and good design sense, this layout can be useful. However, given so many potentially superior layout models, the traditional 3-column model should only be used when it is, in fact, the best choice.

A Sample Fix

It’s easy to poke holes into layouts, but let’s show how a standard 3-column e-commerce site can be improved with just a few changes.

Here we have a mockup of a pretty standard e-commerce page, complete with bad graphics and grammar mistakes for realism.

Before - A standard layout on a very generic site.

In the left column, we have the expected sub navigation area. In the center content area, we have the site’s product offerings, and on the right we have an ancillary column filled with additional product offerings and related links. We’ve all seen this kind of layout before.

Imagine being a consumer who’s looking for a specific product located someplace within this website. Your attention might first be drawn to the product offerings in the content area, but barring a lucky strike your focus will quickly shift to the left subnav area as you attempt to hunt down your desired item. Even as you scan the subnav entries, your eyes probably dart across the page to the right column, trying to get a quick impression of the ancillary content in hopes of finding a link that will lead you to your goal. The real question here is “where am I supposed to look?”

We can easily improve the situation by changing the layout and re-organizing ancillary content to improve logical grouping. Here’s a quick mockup of how a basic improvement might look.

After — The same site with very simple layout pages.

In this redesign, user focus is far less compromised. Featured offerings remain in the central content area, while subnav and ancillary information are logically grouped into the same area. The new design is cleaner, helps enforce efficient use of space, and winnows focus zones from three to two. These simple layout changes ultimately serve the user’s goals better than the three column model. Notice that we didn’t even spend any time on the graphical aesthetics of the site (which could use a lot of work). The layout changes alone make a lot of difference.

There are many other layout options available, all of which might offer similar improvements.

Design for the User

What’s important here is that understanding the needs of the user, and the likely context of the user’s interaction, is key to enhancing the user experience. Design should follow those needs, even when it means that the design requires site managers to exercise more discipline. Better content hierarchy and information architecture models should also support and complement the design process.

By vigilantly considering user goals, and being willing to eschew accepted norms in order to help users reach those goals, designers and UI architects can improve user experience with very simple changes.