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.

Comments

  • Frank Manno

    Damon,

    Great article! The sample “fix” definitely helps put things into perspective. Looking forward to more of these types of posts.

  • Ryan

    Hi, I have to ask, how well thought out is this layout really!

    I have recently seen a trend in:

    YouTube: has a two column body that works well
    Facebook: had a 3 column which they have now just change to 2
    MySpace: has a 2 column layout
    techcrunch: has a 2 column layout

    MySpace, Facebook, and YouTube have all recently tweaked there layout, all with similar with columns all pretty much matching your 2 column example.

    But, I ask the question is this good, or is this a very expensive mistake, maybe like the naming of Microsofts Zune, a very expensive name chosen logically that didn’t really work in the field.

    I’m asking could the same thing be happening with the 2 column layout in the big web sites of today.

    I agree 2 columns is ok, but my main problem is with putting navigation menu’s on the right hand side not the left.

    For YouTube the Navigation commands are on the horizontal in the top section of the page, the commands in the right are not navigation commands but instead advertising and less important commands to the content. This is also the case with TechCrunch.

    But if we look at Facebook they have changed there body to be in a 2 column layout with the right column containing the Navigation commands. As you also did in your example.

    I do believe in the 2 column layout when it’s right, but in the Facebook case and in your example I believe the Navigation should be on the left.

    Why? Well 1.) because use it’s what I myself and I know others are used to and 2.) because I believes it gives a user comfort to know where they are located in the web of a site, this can easily be seen by first assessing the left hand column. In a book you have the name of the chapter at the start of the chapter not at the end. By providing navigation commands on the Left a user knows what section there in and thus is not lost and can comfortably continue to digest the contents of the main column.

    I believe your blog here is good and believe that 2 columns is good. However I believe 2 columns must be used correctly and I believe your example and Facebooks new layout could use some more thought. I would really like your thoughts on my opinion.

    Thanks
    Ryan

  • Hi Ryan,

    Thanks for writing! I’ll see if I can address your thoughts.

    To start, the 2 column layout is, just like any other layout, completely capable of being done badly. It is no panacea that will simply solve layout issues. If a designer doesn’t keep user goals in mind, even the best structural layout can just get bogged down by poor placement choices. You’re right to question any company that just deploys the layout simply -because- it is the new fashionable thing to do. All layouts should be chosen for their ability to reach a specific goal.

    But, on to your specific issues:

    It is very important, as you mention, to meet user expectations. However, there’s a limit to this and we can’t be afraid as designers to stray from a norm simply because people are used to one way of doing things. If you think about it, that would mean that all site layouts would remain static. When the web first blossomed, navigation was almost always found at the very top of a page (much like a book), laid out horizontally or in a list form. For a long time, this was the norm, and it was what early web users expected. But as designers, we have to be able to say “OK, there are expectations and then there are also better ways to do this.” It’s only by stretching away from expectations that we are going to change anything. However, this kind of change has to be gradual (as you’d suspect). You can change, but you also want a touch of the familiar so that the user isn’t completely lost.

    With a 2 column layout, users aren’t going to get lost. Yep, there’s a period of adjustment, but it’s not as though the navigation is hidden (at least not when done right). This is the kind of soft-change that the user can adjust to very quickly.

    In regard to your idea bout the left hand nav being a lot like book chapters, I think you’re spot on. However, consider that books and web sites are fundamentally different animals. Books assume a linear interaction. You hit the start of the chapter, you read all the way through, you get to the next chapter. Websites, and web users, are prone to a less linear model: Skim, explore, jump, skim, finally you read the section you like.

    As long as your page has a header identifying the page you are on (and breadcrumbs are always nice) the user is probably not going to get lost. The right hand menu is still there, and can fulfill the role you mentioned (of showing the user where he / she is and is going) if that’s what your design calls for.

    Also consider content focus: What is the important part of the page? Users tend to look to the top/mid left area of a page first. Since that tends to be the initial focus point, we should capitalize on this fact by placing the actual content there. For instance, when you skim through a news site, like CNN, and you click a story that you want to read, that story should be the focus of the next page and should take the dominant position in the layout. You are unlikely to be confused about what story you are reading as long as there is a headline. The right-navigation is there and persistent, just as a left nav would be, it’s just out of the way of your initial visual scan.

    There’s also something to be said about visual-spacial flow. You mentioned facebook, and that’s a good example. If you go to your initial facebook landing page (which now uses the 2 column layout), look at how easy it is to scan your notification area. Sure, we’re not used to the new right-column nav on initial use, but the goal here is to get a quick picture of what all your friends are doing, and the 2 column layout makes that browse a lot cleaner.

    For comparison, now click your Profile name at the top of facebook and check out your profile page. As of the time of this writing, that page still uses 3 columns with a lot of features in the left. How cluttered does that look when you compare it to the landing page? Visually, it’s a digestive nightmare. However, the goal of this particular page is different from the landing page.

    Also, you’ve probably noticed that the web is moving rapidly away from deep hierarchies and toward a more flat representation model. The best sites (easiest to use) no longer use heavily stacked hierarchies with tons of levels nested beneath each other. There are still some sites and applications that -do- require heavy nesting, but those are special cases. Nesting in general poses its own challenges, and the 2 column layout may not always seem like a natural answer (although in fairness, heavily nested information architectures are a challenge for normal left-nav designs as well).

    Hopefully that’s answered some of your questions, Ryan.

    I should also emphasize: the 3 column layout is not on its own bad. There are places where it is useful. I’m not suggesting we burn all our 3 column code and dance in the flickering light of the cleansing bonfire. The layout is still going to be with us for a while. Heck, I still use it for a lot of things.

    Chiefly, the way to decide which layout (any layout) to use is to really get to what the user goals are for any given site or application. If you have a really complex Info Architecture model, yeah, maybe you do need to be putting your navigation and location information prominently on the left side of the page. But if your goals is to let users read/browse/skim more easily, then your content should be the focus.

    In the end, it’s dangerous for us to become wedded to any layout simply because it is the norm or because we like it. This is true for the 2 column layout as well. All design choices should fundamentally be driven by the goals of the user and helping them achieve the goals in nimble, pleasurable, and elegant ways.

  • Ryan

    Hi Damon, thank you for replying buddy. I really had an itch that I had to scratch with those questions.

    I’ve now asked around a little with some users and they prefer the new facebook layout. Thinking about it more, I also realised there left column was used very little and offered little in terms of navigation for what the user generally does.

    I can’t completely agree that the user looks towards the top-left instantly however. Although studying the sites we have talked about it is easy to see that the left hand column is the favored focal point of the eye, due to the content with in the 2 columns.

    I feel naturally for me (unfortunately I don’t have enough people to ask to get more of an idea of a general user) but for me I look to the center of the screen first and then trail my version off towards the right. I guess if we read left to right, this is what I do, but I start that from the center point of the screen.

    After studying facebook’s layout a bit more I agree the 2 column layout has worked very well for facebook, I can not think of a better layout. I think I would prefer the main content of the body on the right, but not at the cost of the less important content that they currently have on the right to be moved to the left.

    I just asked a college at work, he believes naturally that he looks at the center of the screen first and then from the center he goes directly to the top left of the screen.

    Maybe I’m the odd one out. I’ll try to study this more over the next while through general web use.

    Thank you very much for this great blog entry.

  • Hi Ryan,

    I’m happy you responded.

    You’re actually not far off with focusing on the center of the page. Given no constraints, that’s not uncommon. The up-left focus is almost certainly a learned behavior, which suggests that it is something we could re-teach given enough time.

    Not all users look to the top left naturally. It’s just a behavior we’ve adopted from reading in the english style. In cultures where people read from right to left, orientation is predictably different.

    I think one of the main bonus features of a 2 column layout is just the reduction of visual clutter. Giving the eye 2 areas to focus on instead of 3 is helpful, and you are right, that could be done on the left or right side of the page. My bias is toward the right, due to the aforementioned reading behavior, and because I like to have the scroll interface near the nav column. This may be common, but I wouldn’t argue it is right for everyone.

    Hope you’ll come back for the next article. =) We’ve got one in the works already!

  • Ryan

    Thinking about it more I think were both missing an important factor.

    I guess all of these sites have there main menu at the header of the page, which still allows for navigation and so forth. I guess the main body of a page, would be best if there was even just one column. Maybe thats the next step removing the 2nd column, especially if we’re going for the flat representation model and such a design works well.

    Food for thought.