You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
teaser: What is the future of the hamburger icon as a responsive design pattern?
4
+
layout: post
5
+
---
6
+
7
+
##Why hamburger icons?
8
+
The viewport on mobile devices especially smart phones in portrait mode needs carefully managing of the screen real estate. Navigation lists can be too wide to fit in the horizontal available space of the viewport. Add other elements like logo and search form and the available space is little on smaller viewport sizes like tablets and mobile phones. The hamburger UI design pattern tries to solve that. The navigation that would not fit otherwise is set to a hidden state. The hamburger icon controls the visible state of the navigation.
9
+
10
+
The burger icon design pattern was already used long before mobile and responsive got into the picture. Xerox Star (1970s) used it for contextual menus already then.
11
+
12
+
The use of the burger icon (responsive menu) as a design pattern emerged from mobile and found its way to the desktop as well.
13
+
14
+
{% image burger_desktop.jpg "Example of burger icon on desktop" "Example of burger icon on desktop" %}
15
+
16
+
##Navigation and UI
17
+
There have been studies that question the efficiency of the burger icon as a design pattern. It would be not significant enough to associate it with navigational elements. A [usability study](http://exisweb.net/menu-eats-hamburger) was conducted to find out how people would react to the burger icon. A textual label 'MENU' would aid to clarify the meaning of the burger icon.
18
+
19
+
In any case [hiding navigation](http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement/) behind a burger icon could prove detrimental to the end-user's perception of what the site or app has to offer.
20
+
21
+
The icon appears both left and right on the top of the viewport. What is better left or right? It depends on the design and has not been standardized. It has little of influence.
22
+
23
+
Providing a animated current state change proves very effective. As showcased here by using [CSS 3 transformations](http://sarasoueidan.com/blog/navicon-transformicons/) that indicate the state change.
24
+
25
+
<divclass="inline-image">
26
+
{% image modal.jpg "Example of a modal-like pattern" "Example of a modal-like pattern" %}
27
+
</div>
28
+
<divclass="inline-image">
29
+
{% image modal_active.jpg "Example of a modal-like pattern" "Example of a modal-like pattern (active state)" %}
30
+
</div>
31
+
32
+
Rethinking the design pattern is always possible in the near future. Not every project is put under the scrutiny of A/B testing. Often existing patterns are applied without evaluating first if it is the right design decision.
<ahref="https://twitter.com/johanvdr" class="icon icon--twitter"><spanclass="screenreader">@johanvdr on Twitter</span></a>
100
+
</li>
101
+
<li>
102
+
<ahref="http://be.linkedin.com/pub/johan-van-den-rym/3/b99/a4a" class="icon icon--linkedin"><spanclass="screenreader">Johan Van den Rym on Linkedin</span></a>
103
+
</li>
104
+
<li>
105
+
<ahref="/blog_feed.xml" class="icon icon--rss"><spanclass="screenreader">RSS feed of blog posts</span></a>
106
+
</li>
107
+
</ul>
108
+
</div>
109
+
</div>
110
+
<divclass="main">
111
+
<mainrole="main" id="main">
112
+
<articleclass="post">
113
+
<header>
114
+
<h1>The meat of the burger icon</h1>
115
+
</header>
116
+
<h2>Why hamburger icons?</h2>
117
+
118
+
<p>The viewport on mobile devices especially smart phones in portrait mode needs carefully managing of the screen real estate. Navigation lists can be too wide to fit in the horizontal available space of the viewport. Add other elements like logo and search form and the available space is little on smaller viewport sizes like tablets and mobile phones. The hamburger UI design pattern tries to solve that. The navigation that would not fit otherwise is set to a hidden state. The hamburger icon controls the visible state of the navigation.</p>
119
+
120
+
<p>The burger icon design pattern was already used long before mobile and responsive got into the picture. Xerox Star (1970s) used it for contextual menus already then.</p>
121
+
122
+
<p>The use of the burger icon (responsive menu) as a design pattern emerged from mobile and found its way to the desktop as well.</p>
123
+
124
+
<p><figure><imgclass="lazy" data-src="/assets/images/burger_desktop.jpg" src="/assets/images/"><figcaption>Example of burger icon on desktop</figcaption></figure></p>
125
+
126
+
<h2>Navigation and UI</h2>
127
+
128
+
<p>There have been studies that question the efficiency of the burger icon as a design pattern. It would be not significant enough to associate it with navigational elements. A <ahref="http://exisweb.net/menu-eats-hamburger">usability study</a> was conducted to find out how people would react to the burger icon. A textual label 'MENU' would aid to clarify the meaning of the burger icon.</p>
129
+
130
+
<p>In any case <ahref="http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement/">hiding navigation</a> behind a burger icon could prove detrimental to the end-user's perception of what the site or app has to offer.</p>
131
+
132
+
<p>The icon appears both left and right on the top of the viewport. What is better left or right? It depends on the design and has not been standardized. It has little of influence.</p>
133
+
134
+
<p>Providing a animated current state change proves very effective. As showcased here by using <ahref="http://sarasoueidan.com/blog/navicon-transformicons/">CSS 3 transformations</a> that indicate the state change.</p>
135
+
136
+
<divclass="inline-image">
137
+
<figure><imgclass="lazy" data-src="/assets/images/modal.jpg" src="/assets/images/"><figcaption>Example of a modal-like pattern</figcaption></figure>
138
+
</div>
139
+
140
+
141
+
<divclass="inline-image">
142
+
<figure><imgclass="lazy" data-src="/assets/images/modal_active.jpg" src="/assets/images/"><figcaption>Example of a modal-like pattern (active state)</figcaption></figure>
143
+
</div>
144
+
145
+
146
+
<p>Rethinking the design pattern is always possible in the near future. Not every project is put under the scrutiny of A/B testing. Often existing patterns are applied without evaluating first if it is the right design decision.</p>
A SASS mixin to add multiple web fonts" class="page-navigation__link page-navigation__link--left" rel="prev">A SASS mixin to add multiple web fonts →</a>
@@ -68,7 +68,7 @@ <h1 class="page-title">404: Page not found</h1>
68
68
<pclass="lead">Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. <ahref="/">Head back home</a> to try finding it again.</p>
0 commit comments