Standard Website Layouts and Designing for Humans

I’ve had the privilege of working with many designers in my career as a web developer. Some are seasoned pros; others are fresh out of school, but one thing’s been universal: designers have a passion for solving visual problems. One of the most natural parts of becoming a visual problem solver is learning to think outside the box, combining standards and cliches with inventive ideas to present the old material in a new way.

But even though it’s essentially the foundation graphic design is built on, visual problem solving often conflicts with the practice of web design. Before you get all “developers just don’t understand,” let me explain. When designers first start working on the web, inevitably they’ll try to manipulate the medium in ways no one else has ever done before. Depending on the designer involved, this is either extremely exciting or really frustrating. This creative thinking can lead to new ideas that revolutionize the web—or the resulting “creative” layout does nothing more than break the core functionality of a website and create headaches for users.

Standard website layout

Let me demonstrate with what I consider the standard layout for the web. Even though it sounds boring, the standard layout is a powerful tool. I have chosen a beautiful and successful example of a site that follows the standard formula:

MailChimp is one of the best newsletter services out there (not to mention one of the best web apps in general). The site’s functionality is incredible, its design is top-notch, and yet the layout is totally conventional:

  • The logo is in the top left.
  • Main navigation is across the top.
  • Login/membership options are in the top right along with site search.
  • Main item on the home page is a clear sales pitch with a bold call to action.
  • The home page content density increases and importance decreases as you scroll down.

The interior pages of the site don’t adhere to standard layout formulas, but the moral of the story is that a “normal” layout pattern works. Users are accustomed to it, which makes it easy to use. In many situations the standard layout is going to be the best option. Users will be able to easily focus on the product and your sales pitch instead of spending most of their time trying to figure out your overly creative interface.

Atypical layouts

In stark contrast, there are what I call atypical layouts. I have been talking about them for many years—in fact, each of my Web Designer’s Idea Books have a chapter on the topic of atypical layouts (including the one I’m currently writing). You don’t have to look to hard to find examples of this style—like the Golden State of Mind site.

It’s instantly clear that this site ignores convention. For starters, I don’t even see a logo— oh, wait, there it is in the bottom right corner. The navigation is stuck to the bottom. And the in-page scrolling goes up at first. This sucker pretty much breaks all the rules. It’s certainly beautiful, no doubt about that, and the visuals create a distinct style and draw you in. But does it work? I desperately want to love this site, but in this case I have to say no. The concept behind the site is far from clear.

On first look, I have no clue what the purpose of the site is. At first I assumed that it was about selling clothing (once I located the main logo), but even after I thought I got it, I realized I was just guessing the purpose.

I used to think that if designers understood web technology better, they could design for it more effectively. And to a certain extent I still believe it, but sites like this contradict my viewpoint. The site is designed to work with the underlying technology remarkably well. Under the hood, the site uses good old-fashioned HTML and CSS with a heavy dose of JavaScript to creative the animations and interactions. On that level, the site is outstanding. But it doesn’t work in terms of communicating a purpose to the visitor.

Some of my worst cases of frustration were when the designer designed a site entirely built around how the user interacted with the site’s content. Often this involved animation, transitions, zooming and/or 3D effects. The core problem was that the designer simply had no clue about how the web worked, what was possible, what was normal, or the concepts of usability and user experience. In such cases, a lack of understanding the core technology of the web was the problem. But there was something else missing, too.

Designing for humans

Creative problem solving is one of the most powerful tools in a designer’s proverbial belt. And I still strongly encourage designers to learn HTML, CSS and JavaScript, which are critical to designing and implementing front-end code. But at the same time, saying designers just need to learn code to work on the web is like saying all you need to be a carpenter is a circular saw, hammer and a level. Sure, you can build a lot of stuff with those tools, but the end product might not work too well.

When you build a staircase, you need to know more than just how to use a saw. You have to know the physical limitations, such as the maximum height and depth of the steps. These constraints are set by the limitations of the human body, and if they’re out of whack, the stairs will be useless. This is precisely how the web works. You can design and build sites with a little knowledge of HTML and CSS, but if you don’t consider the needs of the humans using the site, it might not work very well.

Usability and user experience put the user front and center. Instead of simply looking at a design in terms of visual beauty, we need to consider how the user will engage with it and accomplish the desired actions on the site. I’ve found that designers steeped in traditional graphic design training have no concept about how to incorporate usability testing into their work. A large design project might involve focus groups and trial runs, but for the most part a traditional design agency will produce and publish work with little testing or insight from the intended audience. In contrast, the best web work comes from doing the exact opposite.

The more experimental the work, the more critical it is that the site be thoroughly tested. I am confident that if you user tested the Golden State of Mind site, the overwhelming initial response would be a state of confusion. I’m sure that wasn’t the intention, and I don’t fault the designers behind the site. I suspect that this campaign-oriented site will be short-lived, or perhaps I am just getting old.

I urge you designers to learn the technical side of things—it will greatly benefit you. But if you can adapt your thinking to include usability and user experience,  you will find that your work can go to new levels and your creative value will be vastly superior to someone who can only find visual solutions.

2 thoughts on “Standard Website Layouts and Designing for Humans

  1. Pingback: Web Design News Roundup: July 6 @HOWinteractive | HOW Magazine Blog