Webforumz Newsletter - November 2007

Articles

Simplicity in web design

Web designers often get distracted by the complexity of their task, and neglect to keep their websites simple. In this article I will explore the nature of simplicity in web design; I'll explain why simplicity is easy to talk about, but difficult to achieve; and of course I'll give practical examples.

I would have written a shorter letter, but I didn't have time

In his Provincial Letters, Pascal wrote: "I would have written a shorter letter, but I did not have the time." This is a profound expression of the relationship between complex processes and simple results.

The process of mastering web design is complex: even the fundamentals, (X)HTML and CSS, require understanding of eldritch matters such as floats, mysterious browser bugs, and the subtle principles of semantic design. The process of making a website, especially a large or sophisticated one, is also complex. Arguably, the more knowledgeable and creative you are, the harder it will be to keep things simple. If you have lots of good ideas, you naturally want to use them.

The more skilful you are with graphics, the fancier you'll want to make your design; and you'll want big images too. If you're a Flash wizard, then naturally you'll be inclined to use large amounts of Flash. If you're an accessibility expert, you might be tempted to pepper your pages with access widgets.

Beware! The more you know, the greater your danger.

Be mindful of purpose; think about your users

What is the purpose of your website?

Wait. Don't answer that immediately. Think about it afresh; spend a few minutes in honest, careful thought. I'll lend you an ellipsis to recline upon:

...

All done? I'll have my ellipsis back then, thanks. What did you come up with? Unfortunately our conversation is purely rhetorical, so I'll pretend to listen and then present this list anyway:

  • Whatever my client wants
  • Whatever my client needs
  • Personal site for me to write about my interests, store/publish my photos, chat with my friends, whatever
  • Personal site as above, but I really want lots of readers
  • Selling a product
  • Selling a service
  • Selling my web design skills
  • Practising my web design skills
  • Promoting my band/art/whatever
  • Making money from Google ads, affiliate schemes, or other advertising
  • To show the whole world that my cat is the second coming of Jesus Christ

Of course, this won't cover absolutely everything. If you're not listed there, I do apologise for overlooking you.

When you're making websites for someone else, defining the purpose is slightly more complicated. Your purpose is to make money, and establish or extend your good reputation as a web designer; their purpose should usually also be to make money (otherwise how can they afford you?), but they might be confused about how a website assists in this. You may need to advise them about their website's purpose (hence the distinction between what the client wants and what the client needs).

If you don't care about money or popularity, you can do whatever you damn well please. You can make your web pages in real XHTML and laugh at all the IE users ("Oh dear. A download prompt, you say? How strange; must be something wrong with your browser. Formatting your hard disk should fix it."). You can indulge yourself in the wildest graphical extravaganzas, be they sublime art or MS Paint nightmares. You can make your entire website in Flash, with five minutes of unskippable intro. Why not? It's your website, and it has no purpose other than to satisfy you.

If you're trying to make money, or become popular (and the latter, when done really well, entails the former), then you need to sober up. You need to think about what your users want from your website, not what you want. So let's recast the previous list in terms of the purposes of website users:

  • Find information about a company or product
  • Buy a product
  • Buy a service
  • Hire your web design skills, because they want a website
  • Learn about a topic of interest, learn how to solve a problem, or just be entertained

How is this connected to simplicity?

Here's an item that does not appear in that list: "the user wants to be impressed by your web design". Users don't care about your web design; they have specific purposes for coming to your website, and they want to achieve those purposes as efficiently as possible. This requires that your website be:

  • Fast to load
  • Easy to navigate and understand
  • Free of distracting clutter
  • Predictable in its layout and interactive elements (such as links)
  • Organised so that users can rapidly find whatever they're looking for

Whenever your design conflicts with these needs, your design is wrong. Change it to make it more usable. This is the most important element of simplicity: websites should be simple for users to use.

Now let's approach simplicity from the other side. When designers eventually realise that users don't care about their design (or their code, for that matter), they are likely to experience one of two basic reactions:

  • They feel unhappy, because they are artists, dammit. Websites should be impressive; how will people know my creative genius if I make simple websites?
  • They feel liberated, because making a good website just became a lot easier.

So here's a second element of simplicity: websites should be simple to make and maintain.

You've been most patient with my scene-setting. Let's now look at some practical choices between simplicity and complexity.

Choosing between simple and complex

Example one: navigation

Consider the top-level navigation menu for a website.

The simplest way to make this is with text: you have an unordered list <ul>, with hyperlinks inside the <li> list items. With a little CSS, you can choose basic formatting such as spacing and colours, and whether the list is horizontal or vertical. It's also trivial to give the links a different hover colour.

What's missing from this solution? It satisfies users, but it may not satisfy the designer: it's not impressive enough; it's insufficiently bespoke. So instead, you could craft the links individually from images of text, perhaps as part of an image map. Or you can use flash to make the navigation fly around the page, fade in and out, or insert cute animations between selecting a navigation item and loading the page.

Where do you stop? And how do you keep coming up with clever new designs for each new website? How can you surpass your imaginative menus, time after time? These are the questions of an artist.

If you kept it simple, you wouldn't have to worry. A list of plain text links is just fine, perhaps with some simple border or CSS background effects. Be a craftsman, not an artist; recycle the same old predictable designs, and follow boring conventions. Users like predictable designs.

Example two: layout

Do you really need that three-column layout? How is it better than two columns?

Three columns in CSS is a lot more hassle than two. Most of the time, you can organise everything you need into two columns: main page content, and a sidebar. Other stuff can be relegated to the footer, or possibly promoted to the header.

If you can't do this, then perhaps you are trying to put too much information on one page. You should identify the most important elements of your page (important for users, that is), and ensure these are prominent by not saturating the page with other stuff.

I'm not saying a three-column layout is always a bad choice, but you should definitely think about using two columns (or even one).

Example three: writing

Be brief. Be clear.

Although different sites will require different styles of writing, you should always strive to communicate information to your users briefly and clearly. Use simple, direct language; avoid tortuous marketing hype, and avoid jargon.

Good writing generally requires pruning. Look over your website copy with a critical eye, asking yourself whether any of it is redundant. Is it useful (or entertaining) to your users? No? Then delete it.

Simplicity isn't always easy

Learning how to reduce the complexity of your websites will save you time. But it's no trivial matter.

Whenever you have the choice between a simple and a complex method, there will always be reasons to choose the complex one. There's always the nagging feeling that your website could be better with fancier graphics; it's always tempting to find new ways of displaying your cleverness or artistic flair.

Sometimes the more complex method is better. For example, I believe that using elastic layouts is a Good Thing, because it lets users resize the text effectively. Unfortunately, elastic layouts are considerably more complex to implement (or at least, they take some getting used to).

This conflict between complexity and simplicity requires you to develop good judgement. You can't expect to master simplicity in web design all at once. But if you look back at old projects, you may often realise that you made things more complicated than you needed. Over time, this experience will develop your judgement.

Simple graphics and the visual hierarchy

If you think of graphics as a method of impressing people ("Wow, what a stunning website!"), then you will tend to use too many, or make them too fancy, or make them too large.

Try to think about graphics from your users' perspective. Good graphics should:

  • Please the eye, and inspire confidence that the user is on a good site
  • Help to emphasise important items, and assist in scanning the page
  • Not be so intricate as to distract from the main content

Although users don't really care about your design, they do make snap judgements. They won't stay on a site just because it has a stunning design, but they may leave if it's downright ugly or completely plain.

Limit the number and variety of graphics on your pages, so that you can use them to create a visual hierarchy. For example, if the most important item (for users, not you!) is your level one heading, then make this the most attractive part of the page. This might have the largest graphic, or the most appealing, or the most colourful. Try to balance the visual weight of the page, in terms of attractive elements, so that the eye is led naturally around the important elements. Since we read from left to right and top to bottom, you can help scanning by placing your attractive elements in accordance with this order (so if you have a strong graphic for one side of the header, put it on the left not the right). This is all subtle, but it will make users feel comfortable on your site, because it's easy on the eye.

Caveats

These principles must be followed with the understanding that there are many exceptions. If you follow them blindly, you may go awry. Always consider your users. Who are they? What do they want from your site? The answers will be different for each website.

Some sites should have fancy graphics. Some sites should have a three-column layout. Some sites may even benefit from being built entirely in Flash, with dancing pixie navbars.

Generally these exceptions are websites whose purpose is not to inform or sell, but to promote, sensationalise, or provoke. Web design portfolios are a special exception, and are particularly difficult to judge; your website is evidence of your prowess, and you may attempt to impress potential clients with an unusually nifty or striking design.

But whenever you're in doubt, the simpler approach is probably better.

Conclusions

As you can see, simplicity is a complex subject. It's not easy to learn, because it requires judgement and mental discipline. But it is worthwhile, because you can make websites that are simpler to use, to understand, to construct, and to maintain.

The most difficult part is recognising when the simple becomes simplistic. Removing unnecessary clutter is good, but if you wield the axe too zealously you may be left with a barren site. Again, it's down to judgement.

I'll leave you with two hallowed aphorisms. These, in their brevity, are the most profound guides I can offer. First, rule seventeen from Strunk's evergreen The Elements of Style:

Omit needless words.

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. This requires not that the writer make all sentences short, or avoid all detail and treat subjects only in outline, but that every word tell.

Finally, let us revisit Pascal:

I would have written a shorter letter, but I did not have the time.