When a icon/image is used well, it’s really awesome. I’m using WordPress right now and this is the menu bar. The icons break down into three categories.
Some things I’m just used to. Bold, italic, left align, insert link, spell check, full-screen. These are all very apparent to me right away because I’ve seen these before a thousand times. These icons are so pervasive I can’t even recall where I’ve seen them first. They take a millisecond to process.
Then there’s the break link . This icon is intuitive in a way different from the ones mentioned above. I’m not sure if I’ve seen this before but it makes a lot of sense because I can see the cartoonish “breaking” of the chain in versus the “link” icon immediately to the left of it. Nice icons like that is great when it works out.
Then, there when it doesn’t work out. I’m fairly certain not many people are going to be able to guess what these two icons are for without thinking about it and even after some thought they are probably going to be wrong.
Ok, if you use WordPress a lot, that’s fine. users won’t know what these buttons do right away but will figure it out and then will get used to them. But sometimes, you’ll have use cases where people aren’t going to be using that interface all that often, then what’s the point of having iconography to represent something if it’s going to take user time to come up with potentially an inaccurate guess as to your intent?
Case and point was putting in batteries into my headphones. I have to drop in vertically a AAA battery. What’s the arrow there mean? My guess is that is the direction of the insert. But I’m looking at this expecting it to tell me the correct state, so I’m looking at it expecting to see what’s the top or bottom. In that context, for a split second I was thinking, “Ok, is that arrow pointing to the top or the bottom.” Then I realized, they are telling me to take this action, “insert it in this direction” and not telling me the correct state. Ok, this isn’t a great example because the doubt wasn’t that high, but I still had to waste time thinking about it. Why make me think about that. Just put the word “top” there instead of the arrow. Yeah, I guess you can make the case that they stick with icons/images instead of English for products like this since they might sell it internationally, but come on, who isn’t going to know the word “top.”
More important than this example, sometimes even in an app that’s clearly for just English speakers, for the sake of consistency or the love of a beautifully executed set of icons, some user interface designers use some vague icon where a word will be super effective. This past week, we were struggling with an icon for “I own this app.” We had the luxury of having both an icon and the action word so it really wasn’t a big deal if we had a vague icon for this button, but I wonder what we would have decided upon if we didn’t have space for an icon-word button. I would have fought hard for a “Own” button even if it was a nice pretty square and everything else was a square icon. As much as I love consistency in a user interface – ask anyone I’ve worked with 🙂 – sometimes a word can be better than an image.