kaioa.com

pew pew

Know your :target

:target is one of those sparkling new CSS3 pseudo-classes. Unlike the other (pseudo-)classes it got some semi-dynamic properties without any kind of client-side scripting. Well, :hover and :active are also somewhat dynamic, but we're used to that stuff by now.

The :target pseudo-class is supported by all modern browsers. IE6 and IE7 are of course way too old. Unfortunately IE8 still doesn't support this. Pretty disappointing, isn't it?

However, this shouldn't stop you from using :target. If it's used as intended it only adds small visual cues which improve usability a bit. Dropping them won't break the site, but they are surely nice to have. Wikipedia for example uses :target to highlight the footnote you jumped to and anyone with a decent browser benefits from this small tweak.

I'll show you how :target is used on Wikipedia – or more precisely: in general, and I'll also show you some rather experimental things you haven't seen before.

It's a trap

I just trashed my history again. Same accident as last time. Was it my fault? Well, herein lies the problem. I pressed a specific key sequence which triggered the delete. However, it's very similar to a key sequence I'm using a dozen times a day. The only difference is the order of one down and one release key event.

But let me explain it a bit first. If you hold the Control key you can jump from one word to the next with the left and right cursor keys. If you also hold Shift you can quickly highlight a couple of words. I often highlight parts of the URL like this in the address bar. Then I press Delete and then I either add something new or press Return right away.

The problem is that I can trigger Firefox's Clear Private Data dialog with Control+Shift+Delete (i.e. if I don't release Control or Shift quickly enough). If I now press Return right away, which isn't all that unusual if you've done it a million times before, it will delete my history (among other things) instantaneously.

There shall be structure

Benefits

Hierarchical structures are always rather hard to explain with words alone. You've to identify the key items and then lay out their relation to each other - two at a time. This can take a couple of sentences and you'll also have to carefully check if everything is at the right place.

But it doesn't stop there. The worst part is probably that every user will have to parse your explanation very carefully. Of course that only adds a few seconds to the whole process, but those seconds accumulate. Your thousands (or even millions) of users might have done something more important during that time. They could have picked their nose for example, which is an activity many people enjoy more than reading documentation.

Yes, it's true. Reading documentation is really that exciting. So, we really should try everything possible to make it as quick and pain free as possible.

Whenever you're creating some user interfaces you'll often have to recreate/reinvent some concepts. Things you've seen a zillion times. Usually this isn't much of a problem, but sometimes you forget specific usability details, which can degenerate the user experience quite a bit.

Anders Toxboe's website UI-Patterns.com fills the gap by providing dozens of examples for common UI crafting tasks. Each one is illustrated and explained in detail. Additionally, everything is categorized which makes it easy to find related patterns.

It's not that difficult, is it?

The diagram on the right illustrates how things everywhere are. Everywhere except Firefox, that is. For reasons unknown to me Firefox does the exact opposite of what would have been intuitive. I.e. increase the font size with up and decrease it with down. Firefox, however, does it the other way around.

I'm using Firefox for years and I still mix that up over and over again. Today was the first day I became aware of that though. After failing to increase the font size I stopped reading, looked at the mouse wheel, and wondered why it didn't increase the font size. I moved the mouse wheel up, didn't I?