Usability improvements using the DOM

By | | Web Design Tutorials & Articles

As a rule, users don’t like surprises. If they expect one thing to happen and you give them something else, they get grumpy. And rightly so.

Links are probably the best example of this. How many swear words have you muttered watching Acrobat suddenly spontaneously launch itself moments after clicking on a seemingly innocent-looking link? A huge pet hate of mine.

Of course, taking the time to visually tag your links is no new break-through idea. Matterform released a Dreamweaver extension back in 2001 (from memory) that automatically identified external links, mail links, new windows, Word, Flash, Quicktime and a few dozen more non-standard links, and recoded them tasty little icons. It didn’t write the prettiest code (what’s a tag?), but that could be fixed.

In fact, the biggest issue we found was often just rolling it out across larger sites and CMS’s — how do you let your clients tag a link as a PDF?

Chris Campbell at particleTree has a satisfying answer to that question — chill and let the browser do it.

In Preview Your Links with Unobtrusive JavaScript, Chris shows you how do use his linkPreview() function to teach the smart, young browsers to reach into each page, grab the links, check their file extension and append the appropriate icon.

I can’t think of many good reasons not to use this. It’s small, it seamlessly installs in pre-existing systems (just load the script in the head) and it improves usability at a stroke. It doesn’t require much technical savvy to implement and could be comfortably refitted to identify other files formats or sites such as WAV, MP3 or even Wikipedia. Non-JS browsers are no worse off than they were.

As some commenters point out, CSS3 does have facilities for doing exactly this kind of thing. Excellent. There’s also some chance that pixies from the enchanted forest could use their magical fairy dust to re-classify every link on the web.

The DOM looks a better bet for the minute, though.

Written By:

Alex Walker

Alex manages design and front end development for SitePoint.com and writes Design Festival's monthly design newsletter, the SitePoint Design View.

Website
>> More Posts By Alex Walker

 

{ 10 comments }

Noel Jones August 18, 2005 at 2:58 am

On the question of why you might alert the reader to the fact that a link is to Amazon, sometimes a link appears to be to a document but in fact turns out to be a link to a book on Amazon. Signalling the link can avoid this disappointment.

8900200 August 17, 2005 at 4:40 pm

Can’t wait to try this one out. Looks like a handy little snippit. Thanks.

asp_funda August 10, 2005 at 5:51 pm

That’s a cool pointer Alex, thanks for the link!! I had to do it on the serverside till now putting an (appropriate)image beside the link, well, JavaScript was never my cup of tea!! ;)

A_Brisson August 10, 2005 at 4:07 pm

for which browsers would this work?

This is a general solution that has the benefit of being non-hackish. When you feel comfortable relying on CSS3, you can just cut the external javascript and styles, and restyle the page. In the meantime, this solution sounds superior in its wide target range.

dgibson August 10, 2005 at 8:53 am

This is nothing you can’t do with CSS 2 or 3, so why bother with all the DOM scripting? To get that IE6 support? Well maybe the CSS method will be “good enough” when IE7 comes out.

/* MP3 Media Link */
a[href$=".mp3"] {
padding-right: 18px;
background: url(/images/bullets/mp3.gif) right center no-repeat;
}

You can also use the :before or :after pseudo classes with content: to insert the image.

saumendra August 10, 2005 at 12:58 am

This is a really good idea!. Would be implementing this in my own sites. Thanx ALEX for the great TIP.

AlexW August 9, 2005 at 7:57 pm

I was faced with exactly this problem the other day. This is an excellent drop in solution. The only comment I would have is why single out Amazon links?

I’m not entirely sure why he’d isolate Amazon links other than because quite a few bloggers review books and have affiliate links back to Amazon. If Amazon is an important revenue stream to you, maybe this is a way of making it very clear that you can actually purchase this book by clicking this link

mrsmiley August 9, 2005 at 6:35 pm

I was faced with exactly this problem the other day. This is an excellent drop in solution.

The only comment I would have is why single out Amazon links? Isn’t that just setting yourself up for people expecting to have every website marked with an icon? A better option would be to do similar to what I have seen on the Microsoft/MSDN websites, where links external sites are marked with an icon saying that it will take you outside of that site. Then you can see which are special documents and which are internal/external links.

Octal August 9, 2005 at 8:07 am

Totally agree. I am definately going to be making use of this :)

Dean C August 9, 2005 at 7:08 am

Superb idea and great use of the DOM :)

Comments on this entry are closed.