2

Typically speaking, whenever I use an icon for a link, I believe the icon should represent the actual action of clicking on that link. E.g. To edit a post, you'd typically use a pencil icon.

However, I would like to use an icon to show/hide a section or a password. The icon that I've typically seen for this type of action is an open eye and a closed eye or an eye with a line through it.

Keeping with the current logic that I assumed earlier, I would assume that the proper icon to display for a link that hides something would be the closed eye or eye with a line through it. But I'm having a little debate with some developers and I've also seen it where the opposite icon is used and I guess the thinking is that the icon would then represent the current status of what it is you're hiding and showing. It seems to me that closed eye is the more prevalent way to do it as that's also the way it seems IE does it built in for passwords.

My take is it's similar to the pattern of using plus (+) and minus (-) icons when expanding and contracting and accordion. You almost always see the plus icon being used when the content is contracted and the minus when the content is expanded.

So is there actually a standard here? Or is it somewhat subjective? Would love to hear if anyone's done a study to see what's more intuitive to users.

Improve this question
5
  • 1
    The symbol of the eye to show / hide passwords is built into the default control for password fields in IE10, although this may not have been so well received with users as these posts on a Microsoft answers forum attain. That's not to say it's a bad idea though, just that some people don't like it.
    – JonW ♦
    Sep 25, 2013 at 8:13
  • 1
    To provide an example: The one place I have seen an eye icon is in Photoshop (and GIMP, and Inkscape) layers. There, they go with the "status" option: the eye is open when the layer is visible, closed when the layer is hidden. I don't know if your target audience will have formed expectations on that, as these applications are somewhat niche for the general public. I guess that it is also very dependent on the look and feel of your GUI as to whether the control is perceived as a button (do something!) or a status indicator which happens to be switchable.
    – Rumi P.
    Sep 25, 2013 at 10:13
  • on/off toggles always have this issue, I'd say there needs to be a clear priority, is the priority to visually indicate status or to visually indicate what action can be performed with the button. One shows where it is and the other shows where it's going, to be safe I would show both with the enabled status as highlighted and disabled status greyed out but clickable. If that's not practicable then identifying the priority and of course being consistent with other toggles in the same UI would seem to be the best guide.
    – A Macdonald
    Sep 25, 2013 at 14:07
  • Hadn't thought about Photoshop – I like the way they do it as they use what appears to be a blank checkbox which gives more affordance that the layer is actually turned off. Which I'm planning on graying out the sections when it's "off" which should give a little more affordance there, so it should hopefully be less of an issue. But for toggling passwords, it's less obvious - though I suppose the fact that the password is obscured is enough affordance to what the toggle will do in that case.
    – NerdCowboy
    Sep 25, 2013 at 16:50
  • @JonW: Well, at least it was well received by Nielsen. See last paragraph of nngroup.com/articles/stop-password-masking
    – Brian
    Sep 25, 2013 at 18:15

1 Answer 1

Reset to default
1

There is actually a logical line of thinking, although not everyone comply.

  • 1 state button (action button) - these are straightforward; the icon represents the action to be performed when the button is clicked.
  • 2 state button (toggle button / toggle icon) - the icon on these signifies the current state. This is easy to remember from the on/off buttons on old Hi-Fi systems: When depressed (up), the system is off; when pressed (down) the system is on. You can check the status of the system by looking at the button - its position indicates the current system state.

Looking at my screen at the moment, there are two examples of the second point - the star icon for your question is not highlighted, meaning I haven't made it a favourite. Also, the start in my Chrome's address bar is not filled - meaning I haven't bookmarked this question.

The + and - example you give with trees is indeed the opposite than the suggested here (they show action rather than state), but you can argue that the state of the node is already obvious from the tree view itself. What's even more confusing, is that when the right triangle and down triangle are used instead, their logic is opposite than the + and - (they show state rather than action)

By the way, in this specific case, consider an open eye for shown and an open eye with a diagonal line for hidden.

Improve this answer
1
  • I disagree. In my opinion it signifies an action. if it was written instead, you would have show and hide. same principle as play and pause button. you dont have pause button when its paused. you have the play button - what user wants to do. imagine if you had both icon and text next to it. would you have show and closed eye icon next to it? if the user wants to show the password, it should therefore have open eye.
    – verunar
    Oct 1, 2020 at 10:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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