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
Copy file name to clipboardexpand all lines: _posts/2014-10-10-the-beefy-icon.md
+12-10
Original file line number
Diff line number
Diff line change
@@ -5,29 +5,31 @@ layout: post
5
5
---
6
6
7
7
##Why hamburger icons?
8
-
It's a possible solution to a design problem. The viewport on mobile devices especially smart phones and tablets 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. But is it any good?
9
8
10
-
It is a widely adopted UI design pattern that already is in use long before mobile and responsive even existed. Xerox Star (1981) used it for contextual menus already then.
9
+
It is a widely adopted UI design pattern that already was in use long before mobile and responsive even existed. Xerox Star (1981) used it for contextual menus already then.
10
+
Contextual menus and site navigation of a website are not equal concepts. The idea behind it to save screen real estate was the main goal.
11
11
12
12
{% image xerox_big.png "Xerox Star burger icon" "Xerox Star burger icon" %}
13
13
14
-
The burger icon as a design pattern was picked up again when it was used in mobile apps and found its way to responsive web design and web design in general.
14
+
The hamburger as a design pattern got re-introduced again when it was used in mobile apps and found its way to responsive web design and web design in general. But is it any good?
15
15
16
-
On this [website](http://www.wbw.ch/) the entire menu is hidden under a burger icon on the desktop also on larger viewport sizes. If this is a Content First strategy but than where is the wayfinding?
17
-
There must be links in that hidden navigation that are important enough to be visible instead of hidden. This question is often overlooked.
16
+
You could argue it's a possible solution to a design problem. Managing the screen real estate on the viewport of mobile devices especially smart phones and tablets in portrait mode. 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 navigation that would not fit otherwise is set to a hidden state. The hamburger icon controls the visible state of the navigation or other elements like secondary navigation, search.
17
+
18
+
Another reason would be to hide the navigation all together to focus on content first. This could work if the end-user is still able to find its way. On this [website](http://www.wbw.ch/) the entire menu is hidden under a burger icon on the desktop also on larger viewport sizes.
19
+
There must be links in that hidden navigation that are important enough to be visible instead of hidden. This question is often overlooked.
18
20
19
21
{% image burger_desktop.jpg "Example of burger icon on desktop" "Example of burger icon on desktop" %}
20
22
21
23
##Navigation and UI
22
-
There have been UX 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 if people would prefer the burger icon or a textual 'MENU' link. A textual label 'MENU' would aid to clarify the meaning of the burger icon.
24
+
There have been UX studies that question the efficiency of the burger icon as a design pattern. It would be not qualify sufficiently as a signifier in order to associate it with navigational elements. A [usability study](http://exisweb.net/menu-eats-hamburger) was conducted to find out if people would prefer the burger icon or a textual 'MENU' link. A textual label 'MENU' would aid to clarify the meaning of the burger icon. This indicates that the icon does not stand on its own as a visual cue.
23
25
24
26
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. There is always a trade-off to think about.
25
27
26
-
Normally the logo is always on the left but on many sites the burger 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.
28
+
Normally the logo is always on the left but on many sites the burger 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 standardised. It has little of influence.
27
29
28
-
In some cases it does work very well but all depends on the complexity and scale of the data presented.
30
+
In some cases it does work very well but it depends on whether the end-user is able to find and use the navigation accordingly.
29
31
30
-
To provide a better user interaction adding a animated current state change proves very effective. As showcased here by using [CSS 3 transformations](http://sarasoueidan.com/blog/navicon-transformicons/) that indicate state change.
32
+
When the hamburger icon is used you don't see always state changes applied in the user interaction design. To provide a better user interaction adding a animated current state change proves very effective. As showcased here by using [CSS 3 transformations](http://sarasoueidan.com/blog/navicon-transformicons/) that indicate state change. This will help to make the end-user understand better the interaction performed.
31
33
32
34
<divclass="inline-image">
33
35
{% image modal.jpg "Example of a modal-like pattern" "Example of a modal-like pattern" %}
@@ -36,4 +38,4 @@ To provide a better user interaction adding a animated current state change prov
36
38
{% image modal_active.jpg "Example of a modal-like pattern" "Example of a modal-like pattern (active state)" %}
37
39
</div>
38
40
39
-
Rethinking the design pattern is always possible in the near future. Not every project is placed under the scrutiny of A/B testing. Often existing patterns are applied without evaluating first if it is the right design decision.
41
+
Rethinking the hamburger design pattern is always possible in the near future. The general idea is to test possible solutions on efficiency and have an open mind to improve when possible. Not every project is placed under the scrutiny of A/B testing. Often existing patterns are applied without evaluating first if it is the right design decision. Trends come and go, some are here to stay.
<p>Andy Budd is design and user experience lead at <ahref="http://www.clearleft.com/">Clearleft</a> and author of the <ahref="http://andybudd.com/">Blogography</a> weblog. This interview I conducted for Fadtastic back in 2006. Almost a decade ago.</p>
119
127
@@ -140,27 +148,27 @@ <h2>Who is Andy Budd?</h2>
140
148
141
149
<p>Andy: User experience is very personal, so what may provide a great experience for one set of users may provide a confusing experience to another group. Take Flickr. I personally love the user experience of this site–despite a few usability issues–but other people can find it confusing. Conversely there are millions of teenagers who think MySpace is the best thing in the world, despite the fact that it looks like the back end of a bus and is about as usable as a chocolate teapot.</p>
@@ -93,7 +93,7 @@ <h1 class="logo">Johan Van den Rym<span>Thoughts about code and design.</span></
93
93
94
94
</ul>
95
95
</nav>
96
-
<divclass="social">
96
+
<divclass="social">
97
97
<ularia-label="social media and RSS links">
98
98
<li>
99
99
<ahref="https://twitter.com/johanvdr" class="icon icon--twitter"><spanclass="screenreader">@johanvdr on Twitter</span></a>
@@ -106,39 +106,48 @@ <h1 class="logo">Johan Van den Rym<span>Thoughts about code and design.</span></
106
106
</li>
107
107
</ul>
108
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>It's a possible solution to a design problem. The viewport on mobile devices especially smart phones and tablets 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. But is it any good?</p>
<p>It is a widely adopted UI design pattern that already is in use long before mobile and responsive even existed. Xerox Star (1981) used it for contextual menus already then.</p>
126
+
<p>It is a widely adopted UI design pattern that already was in use long before mobile and responsive even existed. Xerox Star (1981) used it for contextual menus already then.
127
+
Contextual menus and site navigation of a website are not equal concepts. The idea behind it to save screen real estate was the main goal.</p>
121
128
122
129
<p><figure><imgclass="lazy" data-src="/assets/images/xerox_big.png" src="/assets/images/"><figcaption>Xerox Star burger icon</figcaption></figure></p>
123
130
124
-
<p>The burger icon as a design pattern was picked up again when it was used in mobile apps and found its way to responsive web design and web design in general.</p>
131
+
<p>The hamburger as a design pattern got re-introduced again when it was used in mobile apps and found its way to responsive web design and web design in general. But is it any good?</p>
125
132
126
-
<p>On this <ahref="http://www.wbw.ch/">website</a> the entire menu is hidden under a burger icon on the desktop also on larger viewport sizes. If this is a Content First strategy but than where is the wayfinding?
133
+
<p>You could argue it's a possible solution to a design problem. Managing the screen real estate on the viewport of mobile devices especially smart phones and tablets in portrait mode. 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 navigation that would not fit otherwise is set to a hidden state. The hamburger icon controls the visible state of the navigation or other elements like secondary navigation, search.</p>
134
+
135
+
<p>Another reason would be to hide the navigation all together to focus on content first. This could work if the end-user is still able to find its way. On this <ahref="http://www.wbw.ch/">website</a> the entire menu is hidden under a burger icon on the desktop also on larger viewport sizes.
127
136
There must be links in that hidden navigation that are important enough to be visible instead of hidden. This question is often overlooked.</p>
128
137
129
138
<p><figure><imgclass="lazy" data-src="/assets/images/burger_desktop.jpg" src="/assets/images/"><figcaption>Example of burger icon on desktop</figcaption></figure></p>
130
139
131
140
<h2>Navigation and UI</h2>
132
141
133
-
<p>There have been UX 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 if people would prefer the burger icon or a textual 'MENU' link. A textual label 'MENU' would aid to clarify the meaning of the burger icon.</p>
142
+
<p>There have been UX studies that question the efficiency of the burger icon as a design pattern. It would be not qualify sufficiently as a signifier in order to associate it with navigational elements. A <ahref="http://exisweb.net/menu-eats-hamburger">usability study</a> was conducted to find out if people would prefer the burger icon or a textual 'MENU' link. A textual label 'MENU' would aid to clarify the meaning of the burger icon. This indicates that the icon does not stand on its own as a visual cue.</p>
134
143
135
144
<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. There is always a trade-off to think about.</p>
136
145
137
-
<p>Normally the logo is always on the left but on many sites the burger 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>
146
+
<p>Normally the logo is always on the left but on many sites the burger 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 standardised. It has little of influence.</p>
138
147
139
-
<p>In some cases it does work very well but all depends on the complexity and scale of the data presented.</p>
148
+
<p>In some cases it does work very well but it depends on whether the end-user is able to find and use the navigation accordingly.</p>
140
149
141
-
<p>To provide a better user interaction adding 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 state change.</p>
150
+
<p>When the hamburger icon is used you don't see always state changes applied in the user interaction design. To provide a better user interaction adding 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 state change. This will help to make the end-user understand better the interaction performed.</p>
142
151
143
152
<divclass="inline-image">
144
153
<figure><imgclass="lazy" data-src="/assets/images/modal.jpg" src="/assets/images/"><figcaption>Example of a modal-like pattern</figcaption></figure>
@@ -150,29 +159,29 @@ <h2>Navigation and UI</h2>
150
159
</div>
151
160
152
161
153
-
<p>Rethinking the design pattern is always possible in the near future. Not every project is placed under the scrutiny of A/B testing. Often existing patterns are applied without evaluating first if it is the right design decision.</p>
Andy budd about user experience" class="page-navigation__link page-navigation__link--left" rel="prev">Andy budd about user experience →</a>
162
-
163
-
</div>
164
-
</nav>
165
-
</main>
166
-
</div>
167
-
<divclass="footer">
162
+
<p>Rethinking the hamburger design pattern is always possible in the near future. The general idea is to test possible solutions on efficiency and have an open mind to improve when possible. Not every project is placed under the scrutiny of A/B testing. Often existing patterns are applied without evaluating first if it is the right design decision. Trends come and go, some are here to stay.</p>
@@ -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>
<p>It's a possible solution to a design problem. The viewport on mobile devices especially smart phones and tablets 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. But is it any good?</p>
14
-
15
-
<p>It is a widely adopted UI design pattern that already is in use long before mobile and responsive even existed. Xerox Star (1981) used it for contextual menus already then.</p>
13
+
<p>It is a widely adopted UI design pattern that already was in use long before mobile and responsive even existed. Xerox Star (1981) used it for contextual menus already then.
14
+
Contextual menus and site navigation of a website are not equal concepts. The idea behind it to save screen real estate was the main goal.</p>
16
15
17
16
<p><figure><img class="lazy" data-src="/assets/images/xerox_big.png" src="/assets/images/"><figcaption>Xerox Star burger icon</figcaption></figure></p>
18
17
19
-
<p>The burger icon as a design pattern was picked up again when it was used in mobile apps and found its way to responsive web design and web design in general.</p>
18
+
<p>The hamburger as a design pattern got re-introduced again when it was used in mobile apps and found its way to responsive web design and web design in general. But is it any good?</p>
19
+
20
+
<p>You could argue it's a possible solution to a design problem. Managing the screen real estate on the viewport of mobile devices especially smart phones and tablets in portrait mode. 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 navigation that would not fit otherwise is set to a hidden state. The hamburger icon controls the visible state of the navigation or other elements like secondary navigation, search.</p>
20
21
21
-
<p>On this <a href="http://www.wbw.ch/">website</a> the entire menu is hidden under a burger icon on the desktop also on larger viewport sizes. If this is a Content First strategy but than where is the wayfinding?
22
+
<p>Another reason would be to hide the navigation all together to focus on content first. This could work if the end-user is still able to find its way. On this <a href="http://www.wbw.ch/">website</a> the entire menu is hidden under a burger icon on the desktop also on larger viewport sizes.
22
23
There must be links in that hidden navigation that are important enough to be visible instead of hidden. This question is often overlooked.</p>
23
24
24
25
<p><figure><img class="lazy" data-src="/assets/images/burger_desktop.jpg" src="/assets/images/"><figcaption>Example of burger icon on desktop</figcaption></figure></p>
25
26
26
27
<h2>Navigation and UI</h2>
27
28
28
-
<p>There have been UX 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 <a href="http://exisweb.net/menu-eats-hamburger">usability study</a> was conducted to find out if people would prefer the burger icon or a textual 'MENU' link. A textual label 'MENU' would aid to clarify the meaning of the burger icon.</p>
29
+
<p>There have been UX studies that question the efficiency of the burger icon as a design pattern. It would be not qualify sufficiently as a signifier in order to associate it with navigational elements. A <a href="http://exisweb.net/menu-eats-hamburger">usability study</a> was conducted to find out if people would prefer the burger icon or a textual 'MENU' link. A textual label 'MENU' would aid to clarify the meaning of the burger icon. This indicates that the icon does not stand on its own as a visual cue.</p>
29
30
30
31
<p>In any case <a href="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. There is always a trade-off to think about.</p>
31
32
32
-
<p>Normally the logo is always on the left but on many sites the burger 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>
33
+
<p>Normally the logo is always on the left but on many sites the burger 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 standardised. It has little of influence.</p>
33
34
34
-
<p>In some cases it does work very well but all depends on the complexity and scale of the data presented.</p>
35
+
<p>In some cases it does work very well but it depends on whether the end-user is able to find and use the navigation accordingly.</p>
35
36
36
-
<p>To provide a better user interaction adding a animated current state change proves very effective. As showcased here by using <a href="http://sarasoueidan.com/blog/navicon-transformicons/">CSS 3 transformations</a> that indicate state change.</p>
37
+
<p>When the hamburger icon is used you don't see always state changes applied in the user interaction design. To provide a better user interaction adding a animated current state change proves very effective. As showcased here by using <a href="http://sarasoueidan.com/blog/navicon-transformicons/">CSS 3 transformations</a> that indicate state change. This will help to make the end-user understand better the interaction performed.</p>
37
38
38
39
<div class="inline-image">
39
40
<figure><img class="lazy" data-src="/assets/images/modal.jpg" src="/assets/images/"><figcaption>Example of a modal-like pattern</figcaption></figure>
@@ -45,15 +46,15 @@ There must be links in that hidden navigation that are important enough to be vi
45
46
</div>
46
47
47
48
48
-
<p>Rethinking the design pattern is always possible in the near future. Not every project is placed under the scrutiny of A/B testing. Often existing patterns are applied without evaluating first if it is the right design decision.</p>
49
+
<p>Rethinking the hamburger design pattern is always possible in the near future. The general idea is to test possible solutions on efficiency and have an open mind to improve when possible. Not every project is placed under the scrutiny of A/B testing. Often existing patterns are applied without evaluating first if it is the right design decision. Trends come and go, some are here to stay.</p>
49
50
</description>
50
51
<pubDate>Fri, 10 Oct 2014 00:00:00 +0200</pubDate>
<description><h2>Who is Andy Budd?</h2>
58
59
59
60
<p>Andy Budd is design and user experience lead at <a href="http://www.clearleft.com/">Clearleft</a> and author of the <a href="http://andybudd.com/">Blogography</a> weblog. This interview I conducted for Fadtastic back in 2006. Almost a decade ago.</p>
0 commit comments