So the other day I was designing a UI with some sensitive information on it. This information needs to be hidden by default and the user has to explicitly take an action to view it. For years, I’m seeing the ‘eye’ icon along with password fields to view the password. Never did I look deep into the state of the eye icon. But this time I did.
Toggle icons are mainly used as stand-alone icons to switch between 2 states. There is no text shown along with it. The standard practice is to use these icons to display the current state of the UI element.
Some examples:
On the Facebook login page, you can see the password input field. By default, the password is hidden. This is being indicated using a crossed eye icon. Here, the state of the toggle icon and state of information is the same. On click, the password becomes visible which is being indicated using an open (uncrossed) eye icon.
Design tools use a lock icon to denote the locked state of aspect ratio, layers, etc. Here also the state of the lock icon represents the current state of information. On click, the locked icon turns into unlocked state.
Muted and unmuted states in browsers, media players, operating systems, etc. also follow the same pattern. When the audio is muted, it is being represented using a crossed megaphone. On unmute, it turns into an uncrossed megaphone. Always the icon represents the current state of volume.
The problem with this behavior is sometimes users are not sure what’s going to happen on click. The current state gets more importance than the upcoming state. It may take some time to get used to this behavior.
So when do we use the icons the other way around? The upcoming action is represented through icons when it is part of a CTA. Especially when there is a label is present, the icon also should complement the text. It cannot be contradictive.
Hope this gives some idea of when to use toggle icons and what should be the right state of icon for the information displayed.
