Graphics and Speed - Page 2
September 10, 2001
Probably the biggest influence of usability on page design has
been in the field of graphics. People don't like watching a blank
screen while waiting for big graphics files to download. Research
suggests they'll move on if they have to wait ten seconds or
more, and current thinking is that even ten seconds is too long.
Eight is the maximum and four or six desirable. Standard
connections download at around 4 to 5 kilobytes a second, so you
should be aiming to squeeze all your important stuff into the
first 20 kbytes or so. That doesn't leave much room for graphics.
It's the reason why fashion in site design has moved away from
the extensive graphic elements of a couple of years ago to the
current minimalism. No backgrounds, no image maps, just a couple
of small pictures.
If you must have big graphics then make sure they still allow
your visitors to see a fully usable site within a few seconds.
Eye candy that makes the page more attractive might be acceptable
if it is just that — eye candy — and doesn't perform
any other function. Image maps have almost entirely fallen out of
favor because they are essential to navigation and the site isn't
usable until they've finally turned up on screen.
Watch out for other navigation issues too, including delayed
rollover menus and icons. A classic usability error is getting
the size of navigation graphics down to a minimum, and then
allowing them to share a page with big images. The browser does
its usual trick of downloading five or six images simultaneously,
meaning the important navigation elements are delayed while the
pretty pictures begin loading way down the page.
On the Web's most popular sites you'll find only a few examples
of graphic elements used in navigation.
If you really must have navigation images, use the Alt property
of the image tag to show text before the graphic appears. To
indicate that the Alt text is a hyperlink and can be used for
navigation, you can put it within the <a href=…> and
</a> tags rather than reserving that honor for the image
alone.
All images should have their widths and heights specified within
the image tag, otherwise the browser will wait until it's fully
downloaded them and knows all their sizes before rendering
anything on screen — including the accompanying text.
Additional Resources on Graphics and Speed
Colors and Text
There are three main issues here: The colors of text, hyperlinks,
and the backgrounds on which they're read. Almost all popular
sites use black text, standard blue hyperlinks and white
backgrounds.
Black text on a white background gives high contrast and is the
easiest to read at length — that's why it's so popular. Any
variation reduces contrast and legibility, but if the variation
is minor then the loss of legibility will be minor too. No big
deal.
Light text on a dark background can also give good legibility,
but the general consensus is that it's harder to read at length,
so is more suited to short text.
If you use colored text on a colored background, you need to take
care over contrast and legibility. Color pairs that are
technically defined as complementary (meaning they're at opposite
sides of a circular spectrum or color wheel) such as red and
green or gold and blue, give more contrast than colors closer
together on the spectrum, such as red and orange. If you're
tempted by a bold combination, be sure to check your pages on a
screen that suffers from reflected glare. Combinations that seem
fine on a well-positioned screen can merge into obscurity on one
that's badly positioned — and that's the situation many
your visitors may be stuck with.
When it comes to hyperlink colors, there's another issue that
needs taking into account — user expectations. In the early
days of the Web, everybody was a new user and nobody had much in
the way of expectations. Red text on a black background with
yellow hyperlinks was fun. But those days are behind us. There
are now millions of experienced Web users and they all know that
blue underlined text definitely means a hyperlink. Yellow
underlined text may also mean a hyperlink, but then again it may
not.
If you use standard blue underlined hyperlinks you are removing
any possibility of confusion. Any other scheme will introduce an
element of doubt, because it does not conform to expectations.
At this level the science runs out and we come down to opinion.
Just how important is that possibility of confusion?
If you have a navigation area full of underlined yellow words on
a black background, surely everybody will recognize they're
links? Probably so, but it's interesting to note that most of the
popular sites stick with the standard blue.
Choosing standard blue can influence your entire color scheme.
You'll notice that relatively few sites on the Web make extensive
use of green. That's because it doesn't mix well with hyperlink
blue. Color schemes in red, blue and yellow are more popular
because they're easy to use with hyperlink blue.
Usability - the Basics
How Users Read - Page 3
|
