<figure><img class="graf-image aligncenter" src="https://cdn-images-2.medium.com/max/1600/1*zHtmoxeiEJ7btMX6CDgECg.gif" data-image-id="1*zHtmoxeiEJ7btMX6CDgECg.gif" data-width="800" data-height="600" data-action="zoom" data-action-value="1*zHtmoxeiEJ7btMX6CDgECg.gif" /></figure>
<h3 id="d2f4" class="graf--h3 graf-after--figure graf--last">The Show/Hide Eyeball in UI Design</h3>
<p>I don’t really like hamburgers.</p>
<p id="46be" class="graf--p graf-after--blockquote graf--last">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.</p>
<p id="b4cf" class="graf--p graf--first graf--last">PAUSE<br />
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.<br />
RESUME</p>
<p id="c547" class="graf--p graf--first">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.</p>
<p id="72e9" class="graf--p graf-after--p">Most of these examples transition from the common stacked lines representing the list, to an ‘X’ or a back arrow.</p>
<p>While this is a great solution to abbreviate a navigation menu, there are other, more universal solutions to show and hide content.</p>
<h3 id="17dc" class="graf--h3 graf-after--pullquote">More Universal Solution</h3>
<p id="fb90" class="graf--p graf-after--h3">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.</p>
<p>The Eyeball</p>
<figure><img class="size-medium wp-image-865 alignleft" src="http://www.prototypr.io/wp-content/uploads/2016/05/Screen-Shot-2016-05-23-at-01.36.33-300x172.png" alt="Screen Shot 2016-05-23 at 01.36.33" width="300" height="172" srcset="https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2016/05/13142404/Screen-Shot-2016-05-23-at-01.36.33-300x172.png 300w, https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2016/05/13142404/Screen-Shot-2016-05-23-at-01.36.33-768x441.png 768w, https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2016/05/13142404/Screen-Shot-2016-05-23-at-01.36.33-1024x589.png 1024w, https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2016/05/13142404/Screen-Shot-2016-05-23-at-01.36.33-600x345.png 600w, https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2016/05/13142404/Screen-Shot-2016-05-23-at-01.36.33.png 1284w" sizes="(max-width: 300px) 100vw, 300px" /></figure>
<p id="fac4" class="graf--p graf-after--figure">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.</p>
<h3 class="graf--h3 graf-after--p"></h3>
<h3 id="d89b" class="graf--h3 graf-after--p">Applications</h3>
<p id="87c7" class="graf--p graf-after--h3">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.</p>
<figure id="1c61" class="graf--figure graf-after--p graf--last"><img class="graf-image aligncenter" src="https://cdn-images-2.medium.com/max/1600/1*Ybjn_BgoB85gq9328MvL9A.gif" data-image-id="1*Ybjn_BgoB85gq9328MvL9A.gif" data-width="800" data-height="600" data-action="zoom" data-action-value="1*Ybjn_BgoB85gq9328MvL9A.gif" /><br />
<a class="markup--anchor markup--figure-anchor" href="https://dribbble.com/shots/2407000-Daily-UI-045-Info-Card" rel="nofollow" data-href="https://dribbble.com/shots/2407000-Daily-UI-045-Info-Card">https://dribbble.com/shots/2407000-Daily-UI-045-Info-Card</a></figure>
<p id="4a34" class="graf--p graf--first">Menu Items: The eyeball can be used to show and hide menu navigation.</p>
<figure id="6a48" class="graf--figure graf-after--p graf--last"><img class="graf-image aligncenter" src="https://cdn-images-2.medium.com/max/1600/1*9CfJFrPOMNOZ-BVeDzetRQ.gif" data-image-id="1*9CfJFrPOMNOZ-BVeDzetRQ.gif" data-width="800" data-height="600" data-action="zoom" data-action-value="1*9CfJFrPOMNOZ-BVeDzetRQ.gif" /><br />
<a class="markup--anchor markup--figure-anchor" href="https://dribbble.com/shots/2308103-Daily-UI-007-Settings" rel="nofollow" data-href="https://dribbble.com/shots/2308103-Daily-UI-007-Settings">https://dribbble.com/shots/2308103-Daily-UI-007-Settings</a></figure>
<p id="f68d" class="graf--p graf--first">Secure Information Reveal: The eyeball can be used to reveal a password or account number that is normally hidden.</p>
<p id="266b" class="graf--p graf-after--p">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.</p>
<figure id="1df1" class="graf--figure graf--layoutOutsetRow is-partialWidth graf-after--p"><img class="progressiveMedia-image js-progressiveMedia-image aligncenter" src="https://cdn-images-2.medium.com/max/1200/1*UBuZj1H6i1h68vFQwtzWbQ.jpeg" data-src="https://cdn-images-2.medium.com/max/1200/1*UBuZj1H6i1h68vFQwtzWbQ.jpeg" /></figure>
<p>&nbsp;</p>
<figure id="7adc" class="graf--figure graf--layoutOutsetRowContinue is-partialWidth graf-after--figure"><img class="progressiveMedia-image js-progressiveMedia-image aligncenter" src="https://cdn-images-2.medium.com/max/800/1*whUG0Praevy8JZn1unmkyQ.png" data-src="https://cdn-images-2.medium.com/max/800/1*whUG0Praevy8JZn1unmkyQ.png" /></figure>
<p>&nbsp;</p>
<figure id="2e48" class="graf--figure graf--layoutOutsetRowContinue is-partialWidth graf-after--figure graf--last"><img class="progressiveMedia-image js-progressiveMedia-image aligncenter" src="https://cdn-images-2.medium.com/max/800/1*UbOv_PM_7iVt7ek57BiRtQ.png" data-src="https://cdn-images-2.medium.com/max/800/1*UbOv_PM_7iVt7ek57BiRtQ.png" /></figure>
<p>&nbsp;</p>
<p>&nbsp;</p>
<figure class="graf--figure graf--layoutOutsetRowContinue is-partialWidth graf-after--figure graf--last">Windows Password Reveal Button Examples</figure>
<p id="d930" class="graf--p graf--first">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.</p>
<h3 id="6860" class="graf--h3 graf-after--p">The Benefit</h3>
<p id="d746" class="graf--p graf-after--h3">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.</p>
<h3 id="61b2" class="graf--h3 graf-after--p">The Question</h3>
<p id="2af6" class="graf--p graf-after--h3">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?</p>
<p id="9a68" class="graf--p graf-after--p">The only way to find out is to put it at their fingertips. Feel free to take the code from the <a class="markup--anchor markup--p-anchor" href="http://codepen.io/derektorsani/pen/JYbPKx" data-href="http://codepen.io/derektorsani/pen/JYbPKx">CodePen</a> and use it in your UI. Please just remember to share it with me <a class="markup--anchor markup--p-anchor" href="https://twitter.com/dmtors" data-href="https://twitter.com/dmtors">@dmtors</a> so we can improve this together.</p>
<p>Original Versions &amp; Sketches</p>
<figure id="b162" class="graf--figure graf-after--h4"><img class="graf-image aligncenter" src="https://cdn-images-2.medium.com/max/1600/1*flMvn0A0GKZyzncyHK0o4Q.gif" data-image-id="1*flMvn0A0GKZyzncyHK0o4Q.gif" data-width="800" data-height="600" data-action="zoom" data-action-value="1*flMvn0A0GKZyzncyHK0o4Q.gif" /><br />
<a class="markup--anchor markup--figure-anchor" href="https://dribbble.com/shots/2210598-Eyeball-Menu-Revisited" rel="nofollow" data-href="https://dribbble.com/shots/2210598-Eyeball-Menu-Revisited">https://dribbble.com/shots/2210598-Eyeball-Menu-Revisited</a></figure>
<figure id="dce7" class="graf--figure graf-after--figure"><img class="graf-image aligncenter" src="https://cdn-images-2.medium.com/max/1600/1*ihIQ_yAPs8z7Stzqkh4ZOg.gif" data-image-id="1*ihIQ_yAPs8z7Stzqkh4ZOg.gif" data-width="800" data-height="600" data-action="zoom" data-action-value="1*ihIQ_yAPs8z7Stzqkh4ZOg.gif" /><br />
<a class="markup--anchor markup--figure-anchor" href="https://dribbble.com/shots/2112209-Eyeball-Show-Hide" rel="nofollow" data-href="https://dribbble.com/shots/2112209-Eyeball-Show-Hide">https://dribbble.com/shots/2112209-Eyeball-Show-Hide</a></figure>


The Show/Hide Eyeball in UI Design

The Show/Hide Eyeball in UI Design

Top Stories