Log in

No account? Create an account
.::..: ....:.. .: : .::..: .::..:

January 2018
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31

Web Design VI: Stop, Look, and Listen

One of the nice features about the World Wide Web is that it is possible to do all sorts of nifty things, like changing fonts, showing pictures, playing sounds, and having visual effects. Unfortunately, many people seem to think that "possible" is a synonym for "required". It's not.

Presentation is, as we know, important - You might get roast beef and mashed potatoes in your school cafeteria and at Peter Luger's Steakhouse, and it might even taste the same - but chances are, you're going to be more impressed by it at Peter Luger's, where they try to make it look nice, and serve it with all sorts of ruffles and flourishes, than at the school cafeteria, where they don't have time to do more than scoop it up, plop it onto the plate, and shove it across the counter at you. Some societies practically make a fetish of presentation of food; the Japanese, for example, have such a reputation. There are other examples, and not just in food. But the point is that most of us do realize that presentation is important.

Part of that, especially when presenting information, is to avoid distractions or conflicting messages.

Anything that diverts your visitor's attention from your message is, by definition, a distraction. Garish color combinations, such as red or magenta text on a blue or green background, are distractions. So are color combinations where the foreground and background colors are too similar, like dark gray and light gray (both of those color combination flaws make the text more difficult to read). Animated GIF files are sometimes distractions. Music is sometimes a distraction. Hard-to-read decorative fonts are usually a distraction. Non-static visual effects (blink, marquee, etc.) are generally distractions.

Conflicting messages are a little harder to define. In general, if the message of the text is jarring or inappropriate when viewed in the context of its surroundings, chances are that you've got a conflicting message.

Sometimes, conflicting messages are useful - they're not unknown in public service advertising, for example. However, even there, overuse is a bad thing. Distractions are always bad, although the things that cause them may be appropriate in some contexts (and hence not distractions in those contexts).

I'm not telling you not to use those things. Far from it; they can be useful. I'm telling you not to overuse them, and not to use them where they don't serve a message-enhancing purpose.

Animated GIFs, blinking text, and marquees draw the eye. They're the first things that the visitor is going to look at. If there is a definite direction to motion in an animated GIF, the visitor's attention will be drawn in that direction. If you're going to use these effects, make sure that you want your visitor's attention drawn there first. In any case, think about their use carefully, because even after the visitor has looked at them once, they're always going to be visible "out the corner of his eye", and that's a distraction. Distractions are bad.

There are good color combinations, and bad ones. Good ones provide good contrast, and make the text easy to read. In general, dark text on a light background is better than light text on a dark background (light text on a dark background tends to get "swallowed"). Bad ones make text difficult to read, because they provide insufficient contrast. Some combinations aren't just 'bad', they're downright evil. Those combinations are the ones that simply work wrong with the physiology of color perception. Putting red text on a blue background is an example of an evil color combination. It vibrates. It induces headaches or dizziness. You can't look at it for any length of time.

You'll hear a lot of people say that you should stick to black text on a white background. It's not a bad idea, but there's a case to be made that the normal screen white is a bit harsh - like some bleached semi-glossy papers. Experiment a little. You may find that it's a lot easier to read if you use dark blue/navy text on a background that's just a little bit off pure white - say, just a touch of sky blue, or yellow. Be careful when fiddling with colors, though; remember that not everyone supports 24-bit color - or even 16-bit color. Netscape has established a de-facto standard set of 216 colors; if you stick to the colors in this so-called Netscape Color Cube, you should be OK on any browser that supports changing the background color. Today, you're probably OK with just about any color, but note that all displays do not display colors with the same accuracy. You still want to be careful, and check your color selections on different displays from different manufacturers, just in case. Sticking to the Web-Safe Colors (formerly the Netscape Color Cube) might still be a good idea.

Background music is one of my pet peeves. Put simply, I don't like it. I don't like it because I generally have my music playing, either on the computer itself, or on the radio. And there's often no way to turn it off; your choice ends up being to either tolerate it, or turn off all computer sounds. However, there are times when including the sound is a reasonable decision - if the sound has a real connection with the page. That means, for example, that it's perfectly reasonable to have the theme from "Murder, She Wrote" playing in the background on a page about the show, or "Hotel California" in the background of a page about the rock group Eagles. What's not reasonable is putting the theme from "Star Wars" in the background on a page that has nothing to do with the movie, simply because you think it's cool music. That's a distraction. Distractions are bad.

Even if you do include background music, don't make it loop forever. The ideal piece of music will be just about long enough for the visitor to the page to read through the page before it ends. Once. Twice, maybe, if your visitor is a slow reader. But too much repetition gets annoying. If the visitor isn't done reading the page after two cycles of the sound file, let them suffer a period of silence. Another thing that gets annoying is cheesy electronic music. MIDI files are good, in that they don't take up a lot of space. But they don't have the sound of a real recording, and never will. They're always going to sound like cheesy electronic simulations of real instruments. Actually, MIDI simulation of instrument sounds has improved to the point where they're often better than merely tolerable, and "cheesy" no longer applies. It's still better, though, to stick to recordings of real music in formats that have high fidelity.

Other use of sound isn't generally a problem, because it's on the visitor's demand, and the visitor knows what he's getting into. Long pieces, such as recordings of speeches or songs, should have a way to pause them, so that the visitor can leave the machine if necessary and not miss anything. Short items, such as demonstrations of how to pronounce a word, can just be played.

In recent times, multimedia has come to include video, possibly even more than straight audio. When included, the video is automatically going to be the center of attention. Take that into account when you're building your page.

Short form: Make sure that, when you add multimedia effects, you are enhancing your message, not distracting from it. Remember, your main purpose is to deliver a message; you don't want your audience to be distracted from that message, or confused over what that message is.


Important note about "autoplay" sound files.

Using them will *royally* piss off any visually impaired users that needs a screen reader program to use the computer. They *can't* "turn off sound" and still use the computer.

Worse, the music or whatever will at best make it hard to hear the reader reading the page to them. At worst, it'll drown it out totally, and they'll have to close the window to be able to do *anything* on their computer.

This is *majorly* unfriendly. And if your site happens to be something commercial or "government" you may well find yourself reported for violating the Americans with Disabilities Act (or local equivalent if you are outside the US).

I've watched a blind friend try to access a fan site about a TV show she is in love with. And be unable to use it due to the show theme playing incessantly in the background. At heard her curse like a sailor when the email she she managed to send to the site owner (required my help since the music kept her from getting the address) got a "Well, if the music bothers you, just turn down the sound" response *totally* ignoring what she'd told them about the problem...

Oh yeah, the reverse problem as well. Graphic "buttons" with no hint as to what they do if you can't see them (why I recommend folks install Lynx and try using their web site with it. Approximates a screen reader enough to get the idea, even if it ain't perfect.

Edited at 2009-10-04 07:33 pm (UTC)

This is indeed a very good point about autoplay sounds and the vision-impaired.

I've been dealing with visually impaired users since the 80s. Back in the BBS days, had one invite me and the sysop of the system I was helping her run over to check out a problem with her computer.

She explained a few of the *really* annoying* things for readers back then (when it was dedicated board in the PC).

One peeve back then was stuff where the menu selections were indicated by changing the color of the letter in the word. Like this:

Read message

The reader could read stuff with a particular color or attribute (useful for properly made menus). But it'd either get "err" or "ead messages" from that trick above. And if the colored letter was in the middle of a word... Yech.

So we made a point of making menus like this:

R Read Message