Web User-Interface design 101 


Just a few pointers on how to make your webpages easier to use.


Firstly, remember: NEVER, EVER, MOVE SHIT ABOUT.

This is one of my prime peeves. People learn how to use things. If your
website keeps changing the order of the navigation links, then it's
just annoying.

Someone need only read the entire group of links once, and after that,
whenever they need to change section in your website, they merely look
to the navigation selection at where they remember the link being,
and click on it once they've verified it's correct.

If you're not using something like PHP includes or mod_include, then
yes, you really do need to update /every/ page on your site that has
that nav bar.


As part of moving shit about, people expect other consistencies in
their user-interface. If red things means bad and green things mean
good, then making one of the bad things a delicate purple is altogether
stupid. Which may be obvious when you think about it.

So why do you change the color of the scrollbars?
This goes several things:
1) I can't see your pretty-pretty-clever-clever eye-candy. Me. I. Honest,
I can't. My browser doesn't support such a stupid and easily-abused tag.
2) Your average windows user isn't the sharpest tool in the box. If you
change that thing that's usually a boring grey bar so that it's on the
wrong side of the page and green, there's no way in hell that they're
gonna find it. And they're unlikely to use it even if they do find it.

I can accept the use of that in exactly one situation. Where you're using
it as some mere decoration. Where your webpage fits onto one screenload,
and someone isn't expected to scroll. Your webpage doesn't fit into one
600x350 box? Oh, too bad. I can't see the bottom half of it, and I'm
not gonna go looking.


Your pages need to be fast.

And this is a more serious situation than it used to be. The number used
to be seven seconds. If your page isn't at least usable within seven
seconds, people just shut the window and move on.

The web is big. You need to learn that you're not the only one where
someone can read about the things that you're trying to write. Let's
face it. There are many many people who've written about web design
practices. If my pages aren't loading, people will go elseplaces.

Nowadays, I'd say that on average the time is more like 5 or 4
seconds. With the advent of faster connections, people got used to
pages loading faster; if a page isn't available pretty quickly, they
don't bother. Note that I say "faster" connecions here meaning 36.6
and above. The seven-second figure here is from when 28.8 was about the
fastest connection around.


Mouseovers

From what you may have gathered, I don't completely disapprove of
JavaScript. Mostly, yes. In this case, no.

Decent feedback in the user-interface is good. If I see a link on the
edge of the page that I want to click on, I move the mouse over to it
and click. You get extra bonus points if I know that I'm clicking on
the right thing. That means that if the image lights up, I know I'm over
the right thing. And I'll click it. Just do remember to preload all your
mouseover images, if you want them to be worth the effort.

You want your page to be displayed more quickly? Postload them. Run
the javascript that loads them at the end of the page, so that all
browsers will do that funky HTML displaying thing before running the
javascript. Almost the same effect, but the page appears to load faster.

Don't forget, though. Small changes. The text getting a shadow is
good. The Picture of the world gently spinning is good. The lass pulling
her trousers down 3 inches is good. Changing the picture of an airplane
to a picture of a helicopter is not good.

If it doesn't look like a link until the mouse is over it, I'm not gonna
find it. If I have to click on the car's door to open it, and none of
the rest of the car does anything,  then I'm not gonna work that out
unless you've forced me to read how to do it. That's non-intuitive,
and that's bad.


My final comment here is on colored backgrounds. I'm not proud. I know
my eyesight is pretty poor. I know my father's eyesight is absolutely
dire.
A colored background is ok. But make sure it contrasts with the text
on the page. Black on white is good. Black on yellow is double good but
ugly. Green on black is double good and pretty if used correctly. Dark
grey on slightly-less-dark-grey is not good.

Textures backgrounds are not ok. No, not even that one that came with
windows 2k that is all black & orange. It may seem pretty to you, and
I can see the appeal. But it's VERY difficult to read text on top of it.

Luckily, opera to the rescue again. I click on the "user-defined
stylesheet", and it dumps all your pretty stuff in favor of something
I set up long ago and I can easily read. Except that it dumps /all/
of your pretty stuff. Yes, even those pretty red links. If you want me
to see the page as you envisage it, you're gonna have to go without the
funky backgrounds, or make sure they're readable.

And when I'm not using opera? I shut the browser. You lose my custom. Full
stop, not doubts about it. Which you may not think is a good thing.

There's lots of stuff on the web about user-interface design. Most of
it's true. I'm just writing this stuff here because if you want /me/
to read your webpages, these are just a few of the things that I expect.