Layout Conventions

One thing to remember about the user experience is that humans in general greet new information by comparing it to established information. For example, if you say scientists discovered a huge, never-before-seen dinosaur-like lizard in South America, I'm going to imagine any number of dinosaurs that I am already familiar with. If I've visited J. Crew's Web site a hundred times, when I go to The Gap's Web site for the first time, I'm going to try to base my interactions with The Gap's Web site on my past experiences at the J. Crew site. Here're some popular clothing site Home Pages one-by-one:

The Gap:

Eddie Bauer:

J. Crew:

Old Navy:

They all look different (though The Gap's site and Eddie Bauer's site are so similar it'd be easy to forget which you were looking at, if not for the logo), but retain the same basic layout conventions. Even though Old Navy's site has the most significantly different visual "feel" because it uses less white, graphical "buttons", and is far less aesthetically minimalistic, it's really J. Crew's site that is the most unusual in it's layout (it offers immediate and somewhat redundant secondary navigation on the left, and spends far more screen real estate on its front page models).


Web site designers that understand how user's approach and try to use a new Web site will often take advantage of Web page conventions. Using the clothing store as an example, it's easy to look at a handful of clothing Web sites and recognize layout conventions. Here're those clothing sites again, this time looking at tertiary pages (Home > Mens > Pants):

Here's what I came up with:

  • Primary categories line the top of the page horizontally.
  • Shopping cart/my account features are at the top-right of the page.
  • Secondary categories line the left of the page vertically.
  • Clothing items are laid out in a grid-like fashion in the main content area.
  • Clicking an individual clothing item brings up a larger view of the item, usually featuring:
    • text description
    • color choices
    • size choices
    • Add-to-cart feature
    • zoom

There are more than this. Yeah, some of these that I've listed aren't visible in the examples listed above, but are verifiable if you hit their real Web sites.

CC By-NC 2008, Jared Stein. Web Design,
Last modified: Thursday, 14 June 2012, 4:20 PM