With the rise of Mozilla and now Firefox, it’s pleasing to see that many web sites have stopped using
alt="" attributes as ‘mystery meat tooltips’ shown when hovering over an image. Netscape mistakenly adoped this, which lead to Microsoft adopting it in Internet Explorer, however when the Gecko rendering engine was being written for Mozilla it was decided that the HTML specification should be followed to the book and that the contents of any
alt="" attributes will not be shown as a tooltip. You can, of course, use the
title="" attribute to achieve the same effect if you wish, and it will work on any element – not just images. However, using ‘mystery meat’ navigation, where images are links and the meaning of the image is not displayed until you hover over it, is not a very good method of navigation as it can be very confusing. Text links, or icons with text, are the best methods.
So why have I written this entry? Mostly because of something I saw on putfile.com today. On the left of its pages are the icons on the left, which offer common shortcuts for users. They also demonstrate why ‘mystery meat’ navigation is bad.
I want you to look at each icon in detail and decide what each one actually means. Here’s what I thought, in order:
- The first icon, with a star and a plus, is probably ‘add to favourites’. In Windows, Favourites are represented with a star and the plus symbol implies adding something. So that’s okay.
- The ‘X’ probably means delete – i.e. I can delete what is on the page. ‘x’ symbols tend to be used for deleting files or closing applications.
- The envelope with a letter – I’m guessing this is ’email to a friend’ as envelopes are often associated with email.
- As for the swirly star thing, I have no idea. Go back to the home page, maybe?
In Internet Explorer on Windows, you can hover over the icons and a tooltip will be shown telling you what each icon does. But pretty much every other browser – Mozilla, Firefox, Opera, even IE for Mac – won’t. So you essentially have to guess what each image actually means. And because the images aren’t actually links but instead part of forms (don’t ask me why, it seems a pretty crazy way of doing things) you can’t hover over the image and see what appears in the status bar – a link to a page called addtofavourites.php might be a clue, for example.
Firefox and Mozilla, however, have a little workaround – you can right-click the image and choose Properties to view the content of the
alt="" attribute. It’s a bit long-winded and should never be necessary, but it’s there should you need it. However, upon right-clicking, you will receive this message:
Great. So when getting around putfile.com’s screwed up navigation, you are accused of being a bandwidth thief. Gee, thanks.
This might be a personal thing, but I really have no time for web designers who try to restrict what I can do at their site, either by forcing their site to open in a new window with a restricted size and things like the toolbar and address bar hidden, or by disabling my right mouse button. Thankfully, at least in Firefox, upon clearing this particular message the context menu does appear, so that you can check the properties of each image. And here’s what each one means:
- ‘Add to my files’. So nearly right there then.
- ‘Report TOS violation’. Assuming that ‘TOS’ is ‘Terms of Service’ (again, this isn’t made clear), this sort-of deletes the file, so I suppose the ‘x’ symbol is appropriate here. Still, a link entitled ‘Report bad content’ or something like that would probably be more useful to the user.
- ‘Email this page to a friend’. This was correct.
- ‘View Random Video’. Okay, I was totally off the mark here, but that symbol just doesn’t say random to me.
Admittedly in this case clicking the wrong image due to confusion would not have any serious consequences, but it’s something to think about when designing web sites and user interfaces. If putfile.com really wanted to use tooltips, then they should have been using
title="" attributes on the images (or better, the actual links, or whatever weird system they are using). But really, using good ol’ text would probably be better here.