https://dribbble.com/shots/2265937-Eyeball-Menu-in-Animated-SVG-CSS

The Show/Hide Eyeball in UI Design

Derek Torsani
Prototypr
Published in
4 min readDec 30, 2015

I don’t really like hamburgers.

However, I am a fan of the hamburger menu. Some might argue for or against the hamburger menu’s effectiveness, and there are plenty of other articles that go into depth with this topic. This isn’t really one of those.

PAUSE
For those who only know of the hamburger menu as the list of items at the fast food joint down the street, in design it is used to abbreviate a navigation list into a single icon. It’s called the hamburger because typically it is built using three stacked horizontal lines, resembling bun, meat, bun.
RESUME

Many designers have offered alternatives to the hamburger menu, like the hot dog (which I actually prefer at my backyard cookout), or the ice cream cone.

Most of these examples transition from the common stacked lines representing the list, to an ‘X’ or a back arrow.

While this is a great solution to abbreviate a navigation menu, there are other, more universal solutions to show and hide content.

More Universal Solution

In early 2015, I began thinking about how we could replace the hamburger menu with an icon that represents what the hamburger is doing at a foundational level, which is showing and hiding content.

The Eyeball

Click the image to interact

Using an eyeball icon simplifies the show/hide concept of the abbreviated menu to its core, rather than limiting it with horizontal lines. The simplification of the eyeball concept allows for use with more than just a list or navigation.

Applications

Blocks of Content: The eyeball can be used as a way to adjust the framework of a website to show the content you want to see, and hide the content in which you don’t.

https://dribbble.com/shots/2407000-Daily-UI-045-Info-Card

Menu Items: The eyeball can be used to show and hide menu navigation.

https://dribbble.com/shots/2308103-Daily-UI-007-Settings

Secure Information Reveal: The eyeball can be used to reveal a password or account number that is normally hidden.

This option has actually already been adapted for password input fields on Windows. I only recently discovered this while watching my father work on his Windows PC.

Windows Password Reveal Button Examples

Although Windows has already adapted this solution, I believe the interaction with the eyeball can be improved, adding different custom styles and lightweight animation. Also, the application of revealing something secret while hovering or for a temporary amount of time on click can be applied to things other than just the password, like bank account numbers, encrypted emailed information, and more.

The Benefit

Using one icon and interaction, the eyeball, to show and hide content, open and close menu navigation, reveal secure information, etc. will help users understand what the icon can do universally. Users will become familiar with the interaction across different apps, websites, tools, and applications. Instead of using different icons and solutions for interactions that have the same functional foundation, we can make them universal with the eyeball solution.

The Question

As with everything, there are concerns with the user experience. The main question with adapting the eyeball for use in user interfaces is, will users know how to use it successfully, and will they enjoy it?

The only way to find out is to put it at their fingertips. Feel free to take the code from the CodePen and use it in your UI. Please just remember to share it with me @dmtors so we can improve this together.

Original Versions & Sketches

https://dribbble.com/shots/2210598-Eyeball-Menu-Revisited
https://dribbble.com/shots/2112209-Eyeball-Show-Hide

Published in Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us https://bit.ly/apply-prototypr

Responses (4)

What are your thoughts?

The only problem I see with this is when the eye is closed… it’s not that apparent that it’s an eye and that it needs to be opened.
On websites like Microsoft and Google, the default is an open eye which sorta instinctly tells you to “show” things…

--

I think that main strength of the hamburger icon is that it hints at what will happen next by providing a visual representation of a menu. The show hide eye icon does not really convey what will be shown or hidden. However I conceed there will be…

--

What is your program of choice to do these awesome animations?

--