4

Is it necessary to write what a button is if you have a picture?

This is a very general question, and I think the answer to that would be: It depends how clear the image is.

So my question is if the following picture is clear enough:

enter image description here

The button I'm trying to make is: (Hover over below to see what it actually is:)

View History

This is going to be in a website.

  • There are more appropriate SE websites for this question – Ramhound Apr 13 '16 at 0:17
  • 4
    I have no idea what that icon is by the way – Ramhound Apr 13 '16 at 0:20
  • @Ramhound Did u see the hidden text? – Horay Apr 13 '16 at 0:20
  • You asked if it was self-explanatory but whatever – Ramhound Apr 13 '16 at 0:21
  • 1
    It is the time machine logo, Apple's backup solution: en.wikipedia.org/wiki/Time_Machine_(OS_X) – Luc Franken Apr 13 '16 at 8:25
6

Okay, to start with I'll say that it wasn't clear to me what your icon meant. For me, the first thing that popped into my head was "turn back time" which may have been totally appropriate for something like backup software. Other things that came to mind were "rewind", "replay", "restart", etc.

I'm not saying that your icon couldn't signify "view history", just that I've learnt over the years that most icons can be interpreted many ways by most people. There are some exceptions like universally understood icons (ie. save, print, close, play/pause etc), but I would argue this particular icon is not universally understood.

Since there is always the chance of confusion, wherever possible you should incorporate both an icon and a text label. Icons are helpful in cases where people of different languages and backgrounds are using your site. So whenever possible icons should be an addition or fallback option, not the primary way of identification.

The only exception to this is if screen real estate was a real problem for you and, if so, I would opt for text only labels/buttons above icons (unless you're really trying to convey a lot more than just a word or phrase). But since you're talking about "View History", that really could be conveyed with the label "My History" or perhaps even just "History".

And once you have the label, your icon will make a lot more sense and regular users will come to identify that icon with your intended action.

There's an excellent article on icon testing by Nielson Norman Group. It may well be worth your read.

There's also this article discussing the "myth" that icons enhance usability.

Hope this helps!

ADDENDUM

In answer to your question in the comments, you could go with something like this:

history icon

Also, I just wanted to clarify that the only reason I commented on the back facing arrow was because a lot of other icons use this to indicate "rewind" etc in video software and video sites, so it has a fair bit of exposure to users and I think they would already associate it with 'videos' etc.

|improve this answer|||||
  • Very well said! Thank you very much! The reason I picked this icon is, I searched "history icon" in google images, and most images were showing a version of this icon. So you're recommending to have this icon with the text "History", correct? – Horay Apr 13 '16 at 2:20
  • Yes, pretty much. :) – Monomeeth Apr 13 '16 at 2:22
  • Although I do think that backwards facing arrow does create the potential for more confusion than necessary. But, if you add the label, problem solved! :) – Monomeeth Apr 13 '16 at 2:23
  • So should I make it facing forward? – Horay Apr 13 '16 at 2:41
  • Also, do you think this kind of arrow is better? i.imgur.com/rhkEgUW.png – Horay Apr 13 '16 at 2:50
4

I tried to guess what the icon meant without looking at the hidden text. The first thing that popped to my mind was "go back in time", so I thought it was to restore a previous backup or a previous configuration. Nope.

So, don't always assume the user will know what an icon is for -- especially if the screen already include a few dozens of them.

Now, having a text in addition of the icon clutters the GUI and uses screen real estate, so I wouldn't recommend it. Instead, you should use tooltips which clearly explain to the asking user what a button is for without making the design cumbersome.

In 1996 Umberto Eco wrote a great article about computer icons and their abuse, and I recommend all UX users to read it. EDIT: Since it's highly relevant I included here the full text (and improved the translation a bit):

PICTURA EST LAICORUM LITERATURA, SAID the medieval men: that is, you can communicate with the illiterate (then the vast majority) only through images. Then comes the invention of printing, and things change, but not for the illiterate. At one point it was thought that the Gutenberg Galaxy was over, and began a new era of the image. All TV illiterates. Finally came the computer and has again turned the thing over: to use the computer you must be able to read.

Communication through images is often essential: in airports used by people of different languages, it is useful to point out the toilets with little men and little women, the restaurants with crossed knife and fork. These are symbols (or icons) known to all. But what if in an airport you represent Alitalia, Air France, Lufthansa, and better yet Paris, Alghero or Pisa with icons instead of words? It'd work with Pisa, you put the tower, but what are you going to do with Decimomannu [translator's note: a very small airport in Sardinia]? In the confusion a traveler would end up in Cape Town wanting to go to Palermo.

Something similar is happening now with computers. They are to be "friendly" and that is friendly; friendly means fool-proof, and it was decided that a fool can recognize icons and not the words. The idea is wrong: even if he's a fool, someone who uses a computer (let's not say to make a video game, but just to write, keep his accounts, make bulleted and numbered lists, draw tables, send mail, get online with an association of pedophiles) can read.

Now this idiot is asked to memorize an unsustainable number of icons, some of them not at all intuitive. I am writing with my Winword 6, and now I remember the icons that mean close, open, save or print. But for example, there is one that is a square with a row of dots in the middle. It is not intuitive that it means "split window", because it is very similar to that which means "insert table" and dangerously similar to the one that means "border". Since I split a lot of windows, when I want to do that I have a solution which is indeed idiot-proof. At the top it says "window", I click on that word and drops a menu that tells me I can, in order, create windows, put them side by side, split them. And without having anything to memorize.

I go to Italy On Line and I find a little heart at the top. Is that to open an erotic chat line? No, it means "service list" (you understand the ingenious idea: I find there the list of services I love, and therefore that are important to me). But if I'm someone who wants to use Italy On Line's services I'm not a troglodyte, and therefore I'm able to read on the top the word "services" and find what I need. Elementary. Not to mention the baskets: at the beginning it seemed an extraordinary idea to allow everyone to understand at a glance how to get rid of a file. But now, each program has its own trash, except that the visual idea of a trash changes from GUI to GUI: Since you can not shamelessly copy the basket of precursors, the basket looks sometimes a metal box, sometimes a jar of honey. In some places you can find an open door that makes you guess that you can use it to come out of there, but from what? From the file, or from the program?

In the various interactive CD-ROMs, hypertext and multimedia appear big feet, hands, globes, browsed pages, magnifying lenses, Sherlock Holmes' hats, colored arrows that bite their tail, everything. Each CD-Rom has its icons (and for the graphics is a blast). Rarely the program also provides you with a verbal indication that tells how to go back a page, or how to find the path you took. Their argument: the same program could be used in different countries and not everyone knows English. Answer (apart from the fact that now all programs are localized in their own language): to understand the meaning of the icons you have to read a manual of two hundred pages, that even if it is written in your language is incomprehensible. Better then to attach an English-Italian dictionary of four pages.

I repeat, a few icons for the main operations are useful, too many make you dizzy and create illiteracy. But the icons increase is the same phenomenon as the fake wood on the car's dashboards: it appears that the more the wood looks fake, the best it sells. Eventually we will have very user-friendly programs, where everything is made of hieroglyphics, where even what I write will appear on the screen in the form of Anubis, an owl, a mouth with a serrated line above: and we will call Champollion for help.

|improve this answer|||||
0

A picture is worth a thousand words, at least when it is clear what the picture is (which it never is, as it is subject to interpretation and various domain specific, cultural or personal factors). There's no harm in incorporating words into the design (better still, use text labels), and once the users are used to it then you can either give them an option to hide it or remove them as a display option.

If your objective is clarity, then you might need to do some testing to verify that the picture alone is clear enough. If your objective is simplicity, then just text alone is probably simpler then a shape or image that you have to manage. If the objective is to apply iconography to spruce up the interface then I suggest that there are also other areas other than icon design that can probably add more value to the user experience.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.