Web Design in 952 words

Ideas, thoughts, and resources from the permanently curious.

Living

World

Politics

Web Design in 952 words (8/6/10)

Your brain is processing a lot of information right now aside from whatever conscious thoughts you are having. Other than this text, consider your environment:

There's:

the surrounding noises (inside and outside),
what's happening visually out that window and around it,
smells of various sorts, and
what is touching you (like clothing, your chair, a person, etc.)

Inside your body you are:

checking to ensure your hairs aren't indicating a spot that needs to be scratched,
how your body temperature is,
whether you are in pain and if so, where,
where your limbs and such are,
which way is down, and
whether that information jives with what your eyes indicate (a mismatch would indicate you've been poisoned and make you sick)

The fundamental problem confronting advertisers in any medium is getting through all that to your conscious attention, which is why they choose high contrast colors, moving objects, and other elements to try to flip the little "focus on me!" triggers in our brains. As people are exposed to these methods they learn to ignore them. Here:

How many of you skipped the blue image on the right entirely? Each is identical except for the background color. The blue one looks like an ad because of the contrast difference. Those white boxes simply blend much better with cream than blue, so we have to be careful not to design pages like the one on the right. Advertisers noticed this and have even started mimicking it. That's one of the reason Google's AdWords are so successful - they blend in to the page.

Now other factors come into play. A page needs to be logically organized for it to be usable. Two motifs are very common:

Tabs or sections at the top (this site, for example), perhaps with some links in the header.
Sections divvied out on the left, down the screen.

Using both is ok, but each extra element beyond a standard motif taxes the brain ever so slightly, which is stressful. Adding off-site links in the hierarchy that aren't easy to identify, and sprinkle them between the on-site ones, and you've got a pretty frustrating website. People may get it, but that stress makes for a "bad" website.

We also like to see clarity. Consider:

With main body interactive elements, sharp points on boxes, even if they are low-contrast, aren't very common in the natural world where sharp points indicate dangerous things that'll harm us. Make them dull and it's ok.
A lack of shadows seems quite otherworldly. Even cloudy days present enough of a change in light for us to resolve an object in three dimensions rather than two.
Rows of boxes, contrasting even somewhat with the background, all nicely aligned... look a bit weird. Make them asymmetrical (some large, some small, jumbled up) and it'll look ok.
Language can be tricky. These bullets are a lot easier to read than the paragraphs above, and imagine reading all this without the images! Sentences which utilize active verbs also make text much easier to read. The Plain English Campaign's Free Guides help with that greatly.

Information Density is another factor, often highlighted by Edward Tufte. Consider the text "Dining Services" vs. a photo of a clean chef preparing colorful ethnic food in a well kept kitchen. The photo tells us:

a type of food available,
the establishment is metropolitan,
the food won't be a health hazard, and on the basis of all that,
it's probably good.

The fourteen letters and a space in "Dining Services" could only dream of telling us as much. An interesting side effect of this is the idea behind making a page sterile. We naturally expect certain imperfections, the most famous of which is probably the golden ratio. Bluntly, it is 1:1.618 and is found in more places than any of us would ever care to know, and those are just the human derived ones. Our popular idea of an attractive body even conforms to it, more often than not.

With these things in mind, let's try a field trip of sorts. Consider the problems fashion and fragrance houses face for their websites. They try to evoke emotions or memories on their sites because often that's all they've got to work with. The content is something we need to set our eyes on and try out. Without that we're left to our imaginations. Their sites are stripped down to the barest essentials as a result and provide a good case study in what is a beautiful website:

Contrast them to Google, where the site is the product. When we hit the base URL there's nothing other than four things:

The "Google" image
The search box
The submit button, "Google Search"
The "I'm Feeling Lucky" button.

It's only after a second that the rest pops up. We focus on exactly what we want, drawing the attention of 95% of its viewers to exactly what they want. The other 5% get what they want right around the time they ask "So where's the rest?", as if to answer their question. Genius.

Lastly, how do we keep this up on an on-going basis? Design by committee is stressful because so much of it is conjecture. Nothing fights conjecture better than facts. Things like Focus Groups and Heat Maps provide a factual framework for discussions rather than letting the committee's conjecture provide that framework. Keep those facts going on a consistent basis and your webpage becomes a process of educated refinement, rather than simply having something new every time with a whole lot of stress. Your move.