Killing some bad layout conventions

26Aug09

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.

3col

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

  • Centers the content, “making it the focus”
  • Results in a “pleasing” symmetrical design
  • Allows for twice as much ancillary content and cross-promotion on the page at any given horizontal level
  • …mostly it just allows people who don’t understand design and who cannot craft a good content hierarchy to have places to put all sorts of extra info on a page

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

  • Symmetry is usually detrimental to content hierarchy
  • Symmetry diminishes viewer interest
  • Having 2 sidebars, one on either side, defeats the purpose of sidebar content
  • It requires that site visitors first learn (and perhaps relearn from page to page) where to look for a particular sort of ancillary information or links
  • Often results in far too much ancillary information on the page
  • The particular sort of visual noise generated by the 2 bracketing sidebars diminishes, rather than enhances, user/reader focus on the main content

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.

macstore_redux_sm

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…

  • High resolution—comparatively easy to read
  • Pages are largely vertical in nature
  • A person can see and visually take in a large area of content (on a gatefold or newspaper spread) at one time, so many items or department references in a layout are all visible at the same time
  • Typically, the section/article index is not a primary area for content consumption
    Seldom any need to scan many contextually different sections at one time in one area

For online newspaper/magazine main pages…

  • Low resolution—comparatively difficult to read
  • The screen is largely horizontal in nature (because of and necessitating scrolling).
  • Much of the page content is hidden below or above the visible screen area
  • Main page content usually comprises a vast index of content, broken up into distinct and contextually different sections—but this index is a primary content consumption area

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.

horzontal_scan

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.

Advertisements


No Responses Yet to “Killing some bad layout conventions”

  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: