Pop-up icons are awful!

This might seem negative, but I found that I have a visceral reaction against the subject of this post and upon being confronted to explain myself I believe that there are good justifications for my feelings. So let’s hear ’em!

(I’ll even apply this to UI design in Dungeons of Dredmor at the end.)

While redesigning the Gaslamp Games blog, our web dev’r found a plugin for WordPress to give a viewer the ability to share a post on social media sites (which is the cool thing that The Kids do these days, I hear). This plugin is SexyBookmarks. Here it is on the Gaslamp site; my mouse cursor was over the del.icio.us icon:

You get a row of social media icons that pop-up on mouseover. Yes, it’s cute. But I hate it.

The point of an icon is to be a sign for what it represents which is identifiable at a glance. It is the symbol of the thing condensed and simplified as much as possible. This plugin cuts the icon in half, hiding much of the visible space, making it less identifiable. This defeats the purpose of having a full icon.

Is it about saving space? It doesn’t: In the half-hidden mode, the icon is shifted down 10 pixels and upon mouseover the icon is shifted up 10 pixels. These 10 pixels for the icon to move into are left blank anyway, so no space is saved. Why not just use fully visible but slightly smaller icons so that they are more readily identified at a glance, so that they use the full visible area given to them as the designers of the icons intended?

If this is not about saving space then the purpose that remains is using a hidden/unhidden visual cue to designate the mouseover state. Though as said, this conflicts with the design of the icons in the first place because it obscures their quick identification.

In the end it is a gimmick because its outstanding feature interferes with its function. Yes, it’s a cute trick, but it does not make a useful plugin.

… also the web2.0-looking shadow effect doesn’t fit at all with the Gaslamp webpage’s aesthetic.

How does this apply to Dredmor?

A long, long time ago we tooled around with having the quick-slot item bar be hidden slightly behind the UI to give the main game area more viewable space. It would pop-up the item bar to show the full item icons when the mouse go closer to the bottom of the screen, where the items lived. We decided against this design in the end because you couldn’t really tell at a glance what items you had unless you went to mouseover them, which defeats the purpose of having an easily accessible row of icons on the main screen. And it didn’t even save very much space, maybe 16 pixels in all. And it was annoying.

Moral: If you use icons, show the icons. The only information which should be hidden should be information that is not needed at a glance.

Advertisements

Tags: , ,

One Response to “Pop-up icons are awful!”

  1. slycos Says:

    I agree with you! My boss gave me feedback on a design for a pet project of his, and he wanted to add these damn things! Ugh. He doesn’t know anything about user experience. Thank goodness the site is not WordPress!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: