Download Report

Indhold
Side 2 / 22
Indhold
1
Introduktion
3
1.1
3
Problemformulering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2
Brugervenlig Design
4
3
Hamburgeren
5
3.1
Ikonets Oprindelse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5
3.2
Hamburgerens Understøttende Elementer . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6
3.3
Kritiker Af Hamburgeren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7
3.4
Fortaler For Hamburgeren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8
3.5
Alternativer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
10
4
Konklusion
11
Litteratur
12
Bilag
14
A Brugervenlig Design
15
A.1 Digital Medie Forbrug Igennem Årene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
15
A.2 Semiotik - Studiet Af Tegn Og Symboler . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
16
A.3 Designing Intuitive User Experiences - Udskrift . . . . . . . . . . . . . . . . . . . . . . . .
17
A.4 CRAP Guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
19
B Hamburgeren
20
B.1 Hamburger Eksempler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
20
B.2 Facebook Mobil Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
21
B.3 Youtube Mobil Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
22
B.4 Andkok.dk - Portføje Designet Med Få Menupunkter . . . . . . . . . . . . . . . . . . . . .
22
Anders Kokholm
Side 2 / 22
Medieskolerne Viborg
Kapitel 1. Introduktion
Side 3 / 22
Kapitel 1
Introduktion
Denne rapport er er skrevet af Anders Kokholm. Elev på Medieskolen Viborg, Webintegrator HF1-2016
som del af eksamenen i IT, niveau D. Opgaven har overskriften ”Brugervenlighed på websites”.
Bredt emne som det er, så syntes jeg at det vil være interesant at kigge på ”mobile-first”design trenden, og hvordan den påvirker design af hjemmesider. Mobil såvel som desktop.
”Mobile-first”er blevet den anbefalede metode for hjemmeside design. I 2013 overhalede bruger engagement på mobiler (tid brugt på nettet) i USA, engagementet på almindelig PC´er. Udviklingen over
bruger engement kan ses i Bilag A.1 [Allen, 2015]. Ydermere ændrede Google i 2015 deres indekseringsalgoritme til tungt at prioritere mobilvenlige hjemmesider. [Makino and Phan, 2015].
Man skal ikke have set mange websites på sin mobil før man er stødt ind i den berygtet ”Hamburgermenu”. Se Figur 1.1. Det er stort set blevet standard valg for menu design til mindre skærme.
Figur 1.1: Et udpluk af hamburger-menuer.
Figur Kilde: [Gizmodo, 2014]
Ikonet er blevet så anvendt et element i mobil design, at det vil være være en god idé at undersøge
noget mere om ikonet og dens merit som ’Standard Operating Procedure’.
Der opstår hurtigt flere spørgsmål så som: Hvordan blev hamburger-menuen så populær? Hvordan
er hamburger-menuen i forhold til brugervenlighed? Hvilken alternativer er der, og hvilken fordele
og ulemper har hamburger-layoutet i forhold til til de alternativerne? Det leder mig hen på min mere
specifikke problemformulering.
1.1
Problemformulering
Hvordan er brugervenligheden for Hamburger-menuen, både ud fra generel designmæssig koncept
og nuværende praktisk brug?
Anders Kokholm
Side 3 / 22
Medieskolerne Viborg
Kapitel 2. Brugervenlig Design
Side 4 / 22
Kapitel 2
Brugervenlig Design
Internettet er fyldt med artikler og blogs fra designer som taler enten for eller imod trenden. Men jeg
vil starte med lidt generel viden om brugervenlig. Fra nu af også referere som UX.
Design, og i den grad brugervenlig, er et meget bred og indviklet videnskab. Alle bruger tænker og
agere ikke ens, men for at forenkle kompliceret videnskab bliver de vigtigeste principper ofte kogt ned
til en simpel opskrift. Ofte i en let at huske acronym. Eksempler på dette:
• CRAP: Contrast Repetition Alignment Proximity. [Scocco, 2008][Cox, 2011].
Se Bilag A.4 for grafisk illustration af CRAP princippet.
• 10 User Interface Design Fundamentals. [Sollenberger, 2012].
• De fem gyldne regler. [Molich, 2007].
De fleste af design principperne bruger ’iterativ udvikling’. Ved iterativ udvikling vender man, i modsætning til lineær udvikling, tilbage og revidere ens arbejde. Man designer sit produkt, producere det,
tester på målgruppen og evaluere derefter på sin indsamlet data. Det bliver man så ved så længe ressourcerne som projektet har fået allokeret, tillader det. Se Figur 2.1.
Det essentielle ved iterativ udvikling er at lytte til sin bruger, for selv med veltilrettelagt produktplanlægning og research, kan brugeren have uventet adfærd som man skal forholde sig til.
Figur 2.1: Grafisk illustration af design iteration.
Figur Kilde: [Bacon, 2014]
I Bilag A.2 er der en kort gennemgang af Semiotik - Studiet af tegn og symboler.
Anders Kokholm
Side 4 / 22
Medieskolerne Viborg
Kapitel 3. Hamburgeren
Side 5 / 22
Kapitel 3
Hamburgeren
Hamburger menuen er i 2016 et meget omdiskuteret designelement. Der er dog masse af åbenlyse fordele. For det første er det meget pladsbesparende i forhold til eksempelvis seks menupunkter med
tekst og ikon. Sådan en menu vil ofte have problemer med links som flyder over i hinanden, eller som
skaber en meget høj menu. Ud over pladsbesparelse så virker den på tværs af alle skærmstørelse og
opløsninger. Så derfor er det stort set ligemeget hvor mange menupunkter som siden indeholder, og
hvis en webdesigner lader sin kunde stå for fremtidige opdateringer, så kan kunden forøge og formindske antallet af menupunkter uden at designeren skal ind over igen. Hamburger menu’en er også især
smart ved dynamiske hjemmesider og ved hjemmesider med hyppig skriftende indhold.
Se Bilag B.1 for et stort udvalg af hamburger ikonet brugt på en række forskellige mobilsider.
3.1
Ikonets Oprindelse
Hamburger ikonet blev oprindelig opfundet af Norm Cox (Se Figur 3.1), til brug i Xerox Star i 1981.
Xerox Star var verdens første PC med et grafisk brugerflade (GUI) [Antonio, 2014]. Ikonet lå herefter
ubrugt, indtil designeren Loren Brichter brugte en modificeret udgave til listevisning i Twitter appen
Tweetie. Apple genbrugte i 2009 ikonet i deres Voice Memo app til iPhones. Denne gang også til liste
visning. [Antonio, 2014].
Figur 3.1: Normal Cox. Manden bag Hamburger ikonet.
Figur Kilde: [Cox, 2015]
Anders Kokholm
Side 5 / 22
Medieskolerne Viborg
Kapitel 3. Hamburgeren
Side 6 / 22
Den nuværende brug af ikonet, hvor det bliver brugt som et ikon for selve navigationen og ikke ligesom i Tweetie og Voice Memo et underpunkt i menuen, blev især gjort populær af Facebook. I tidlige
mobiludgaver af den populære social tjeneste blev der brugt et ”grid”-ikon samt et ikon-baseret menu,
men i 2010 blev både menu strukturen og ikonet skiftet ud med liste visning. Se Figur 3.2, stører version i Bilag B.2. I nyere tid er det blevet en de facto standard, blandt andet drevet af moderne design og
webudvikler metoder, hvor stor del af både små og store hjemmesider er bygget på frameworks som
Twitter Bootstrap og ZURB Foundation. Begge bruger hamburger menuen som standard på mobile enheder, og begge som er downloaded millioner af gange. [Bootstrap, 2016][Foundation, 2016].
Figur 3.2: Til venstre ses 2008 og 2009 layout af Facebook. Til højre 2010.
Figur Kilde: [Antonio, 2014]
Siden 2010 er der blevet innoveret en del i hamburgeren, dog primært i form af animation, samt udforming af den egentlige menu når ikonet er blevet trykket på af brugeren.
3.2
Hamburgerens Understøttende Elementer
Ud over spørgsmålet om selve hamburger-ikonets brugervenlighed, så er der også vigtigt hvordan brugervenligheden generelt er ved en skjult menu som kommer frem ved brugertryk.
Indtil nu har rapporten primært omhandlet selve ikonet i hamburger menuen. Men ikonet i sig selv
gør intet andet end at aktivere det bagvedliggende system. Der er flere forskellige grafiske måder at
vise menuen, men den klar mest populære er en listevisning som enten bliver lagt oven på sidens indhold, eller som kommer ind fra siden og skubbet indholdet med sig. Se Figur 3.3 for eksempel på en
menu som er lagt ind over indholdet. At menuen er strukturet som en liste giver rigtig god mening i
forhold til ikonets grafiske udtryk.
Anders Kokholm
Side 6 / 22
Medieskolerne Viborg
Kapitel 3. Hamburgeren
Side 7 / 22
Figur 3.3: Lukket og åben hamburger menu på DR.dk’s mobilside.
Figur Kilde: [Danmarks Radio, 2016]
3.3
Kritiker Af Hamburgeren
Apple er for mange anset for at være en af de stærkeste virksomheder inden for design. Både inden for
estetiske design og UX. Det er derfor interessant hvad en af deres ”design evangelister” har at sige om
hamburger menuen. Mike Stern gav i 2014 en forlæsning omkring UX. I den forlæsning udtrykker han
også hans tanker om navigationssystemet. [Stern, 2014]. Selvom Mike’s fokus er på iOs apps, så kan
flere af hans pointer sagtens bruges inden for generel webudvikling og web UX design.
Mike har flere problemer med hamburger menuen. Primært er det et forfærdeligt system til at vise appen’s flow. Det er ikke let at se for brugeren hvor han/hun er, og hvor brugeren kan navigere hen.
Personlige holdninger er en ting, også selvom det er fra en respekteret designer. Men det er godt at
kunne bakke sine påstande op med empirisk data. Det har James på exisweb.net prøvet via en såkaldt
A/B-test. [James, 2014].
I en A/B-test laver man to forskellige udgaver af et produkt, hvor et enkelt element er anderledes. Ud
fra målinger og statistik prøver man så at konkludere om der er en statiske signifikant forskel, og i så
fald hvilken udgave der er best.
Figur 3.4: De to forskellige versioner i A/B-testen.
Figur Kilde: [James, 2014]
Anders Kokholm
Side 7 / 22
Medieskolerne Viborg
Kapitel 3. Hamburgeren
Side 8 / 22
James fokuserede på layoutet af ikonet, og ikke selve brugervenligheden bag den skjulte menu. Han lavede en udgave med et standard tre-bars ikon, og en med ordet ”menu”skrevet i stedet. Begge udgaver
kan ses i Figur 3.4.
Der var over 240 tusind unikke besøgende i test perioden, og samlet set klikkede 1.2 % på knappen.
Hvis man analysere på de 2666 unikke tryk er der en statisk signifikant forskel. Der var 20 % flere klik
for version B (Menu-tekst) end version A (Hamburger ikon). Ud fra dette kan en tilbageholdende konklusion være at hamburger ikonet er mindre intuitiv end simpel ’Menu’ tekst. Se Tabel 3.1 for data og
Figur 3.5 for statisk analyse.
Version
Unikke Besøgende
Unikke Klik
Klik %
A: Hamburger
120.543
1.211
1,0 %
B: Menu
121.152
1.455
1,2 %
Total
241.695
2.666
1,1 %
Tabel 3.1: Resultat af A/B-testen.
Tabel Kilde: [James, 2014]
Figur 3.5: Den lave p-værdi (0.0001) sikrer en stor statistisk sikkerhed, men også stor rækkevide (11% - 28%).
Figur Kilde: [James, 2014]
3.4
Fortaler For Hamburgeren
Selvom der er overvægt af vokale modstandere mod hamburgeren, så er der også folk som Steven
Hoober, som har en meget analytisk og nuanceret tilgang til det. [Hoober, 2015]. Han argumentere at
selvom hamburgeren menuen er ikke perfekt UX, så er heller ingen af de alternativ menuer særlig brugervenlige. I Figur 3.6 er der en touch-map som illustrere brugernes tendens til at trykke (og derved
også fokuser) på den midterste 2/3-del af telefonen.
Layoutet på siden skal derfor optimalt set designes så at det kun er i sjældne tilfælde er nød til at søge
mod toppen for navigationshjælp. Siden skal helst have et flow som muliggøre at de mest brugte handlinger, kan ske organisk i den midterste del af skærmen.
Hobber argumentere hermed at ved at lave en minimal menu, så understøtter man brugerens ønske om
at centrere information.
Med de fremstormede design trends ”Flat”og ”Material”, giver det visuelt også god mening med en
hamburger-menu, da begge design trends fokusere på klare farver, simpel geometri og støjfri layout.
Eksempel på material design kan ses i Figure 3.7.
Anders Kokholm
Side 8 / 22
Medieskolerne Viborg
Kapitel 3. Hamburgeren
Side 9 / 22
Figur 3.6: Et touch-map der illustrere hvor brugerne trykker når de bliver præsenteret for et liste layout.
Figur Kilde: [Hoober, 2015]
Figur 3.7: Skærmbilleder af Gmail-appen og Google Maps-appen på Android.
Figur Kilde: [Hoober, 2015]
Anders Kokholm
Side 9 / 22
Medieskolerne Viborg
Kapitel 3. Hamburgeren
3.5
Side 10 / 22
Alternativer
Der findes et hav af forslag og implementationer af alternativer til hamburgeren. Nogle af dem er stort
set bare grafiske refortolkninger, såsom den sødt kaldte ”Kebab”-menu som kan ses på Figur 3.8.
Figur 3.8: Fastfood menu design. Hamburger og Döner Kebab.
Figur Kilde: [Wroblewski, 2015]
Lidt mere gennemtænkte forslag går ud på fuldstændig at at eliminere hamburgeren og i stedet bruge
veldesignet knapper. Det er dog kun muligt ved simple hjemmesider med få menupunkter.
Det nok mest populære alternativ, er et kompromis mellem et klassisk layout med synlige links og hamburgeren. Udvælg de 2-4 links som er mest essentielle og give dem dedikeret knapper. På så resten nede
i link skuffen som bliver synlig ved tryk på hamburgeren. En god implementation af det kompromis
kan ses på Figur 3.9. Alternativ løsning fra Google kan ses i Bilag B.3. Mobile first portefølje, som er
designet med få hjemme menupunkter, kan ses i Bilag B.4.
Figur 3.9: Et populære design kompromis. Hamburger kombineret med de vigtigeste links.
Figur Kilde: [Curve Agency, 2014]
Anders Kokholm
Side 10 / 22
Medieskolerne Viborg
Kapitel 4. Konklusion
Side 11 / 22
Kapitel 4
Konklusion
I rapporten er der gennemgået lidt generel teori om brugervenlig design (UX), og i Bilag A.2 blev der
kigget på overfladen af Semiotik.
Selve designet af de mest traditionelle hamburger-ikoner falder fint inden for de semiotiske regler for
ikoner. Nemlig at der er en lighed mellem tegn og objekt. Dog med den mente at ikonet først har en
visuel sammenhæng efter man har set menuen foldet ud.
Men selvom ikonet er semiotisk korrekt, så viste den A/B-test, som er beskrevet i Sektion 3.3, at der
ved den tekst baseret knap var en 20 % hyppigere frekvens for brugerinteraktion. Det vil derfor være
logisk at arbejde videre med flere kvanti- og kvalitative tests som prøver at underbygge hypotesen, om
at det ikke er åbenlyst for mange bruger at der er gemt en menu bag ved de 3 streger.
Fordelene og ulemperne ved en gemt menu er også blevet gennemgået i Kapitel 3. En universel konklusion er svær at affinde sig med, men generelt er der mange som skoser hamburgeren og alt den står
for. Dog er spørgsmålet noget mere nuanceret, som især Steven Hoober illustrere godt og som er omtalt
i Sektion 3.4. Hoobers mener at der er tid og sted hvor hamburgeren passer rigtigt fint ind i sidens samlede design, og at problemet ofte ikke er selve hamburgeren, men mere at hele siden er dårligt designet
ud fra UX teorierne.
Den endelig konklusion på problemformuleringen, som lød:
Hvordan er brugervenligheden for Hamburger-menuen, både ud fra generel designmæssig koncept
og nuværende praktisk brug?
Må derfor være at hamburger-menuen er helt fin at bruge i nogle designs. Det skal dog være et bevist UX valg, frem for standardløsningen som det er nu om dage. Da rigtig mange sider er dynamiske
eller for komplicerede til at have hele navigationen synlig på små skærme, så er menu layoutet (Illustreret i Figur 3.9) et rigtig godt kompromis. Det er også i den retning at flere og flere designere bevæger sig.
Men selvom brugervenligheden for ikonet kan diskuteres, og den oprindeligt burde have været designet anderledes, så må man sige at den på få år er blevet så integreret i mobil layouts (og derved ved
slut brugeren) at det kan være en god ide at viderudvikle på ikonet. I stedet for at introducere et helt
nyt koncept, det i sidste ende nok bare vil forvirre slutbrugere mere end det vil gavne.
I sidste ende skal kræfterne nok mere ligges i at forbedre det samlede layout og flow af hjemmesiderne,
end et fokusere alt for meget på et enkelt ikon element.
Anders Kokholm
Side 11 / 22
Medieskolerne Viborg
Litteratur
Side 12 / 22
Litteratur
Allen, R. (2015). Mobile internet trends mary meeker 2015 1. http://www.smartinsights.com/
mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/.
Antonio, P. (2014). A brief history of the hamburger icon.
https://blog.placeit.net/history-of-the-hamburger-icon/.
Bacon, C. (2014). Design iteration.
https://curtisbacon.wordpress.com/2014/10/12/design-iteration/.
Bootstrap (2016). Twitter bootstrap framwork. http://getbootstrap.com/.
Cox, G. (2011). It’s all c.r.a.p.: Four principles of design.
http://www.thinkaroundcorners.com/2011/10/c-r-a-p-principles-design/.
Cox, N. (2015). The juicy story of the hamburger icon for web design.
https://simplifywork.blogs.xerox.com/2015/07/02/
the-juicy-story-of-the-hamburger-icon-for-web-design/.
Curve Agency (2014). Responsive usability testing the nav burger.
http://www.curveagency.com/blog/responsive-usability-testing-nav-burger.
Danmarks Radio (2016). Dr.dk - mobil hjemmeside. http://dr.dk.
Dewey, M., Monnie, E., and Cordtz, J. (2007). Semiotics: the study of signs.
https://www.youtube.com/watch?v=rEgxTKUP_WI.
Foundation (2016). Zurb foundation framwork. http://foundation.zurb.com/.
Gizmodo (2014). Who designed the iconic hamburger icon?
http://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787.
Hoober, S. (2015). Why it’s totally okay to use a hamburger icon. http://www.uxmatters.com/
mt/archives/2015/05/why-its-totally-okay-to-use-a-hamburger-icon.php.
James (2014). Hamburger vs menu: The final ab test.
http://exisweb.net/menu-eats-hamburger.
Kokholm, A. (2016). http://www.andkok.dk/.
Limcaco, J. (2014). Apple and hamburgers. https://medium.com/design-philosophies/
apple-and-hamburgers-a17e4099fada#.o2f09uqbm.
Makino, T. and Phan, D. (2015). Rolling out the mobile-friendly update. https://webmasters.
googleblog.com/2015/04/rolling-out-mobile-friendly-update.html.
Anders Kokholm
Side 12 / 22
Medieskolerne Viborg
Litteratur
Side 13 / 22
Molich, R. (2007). Usable Web Design. Nyt Teknisk Forlag. ISBN 978-87-571-2526-9.
Paper Leaf (2012). Principles of design - quick reference poster. http://paper-leaf.com/blog/
2012/10/principles-of-design-quick-reference-poster/.
Scocco, D. (2008). C.r.a.p.:the four principles of sound design.
http://www.dailyblogtips.com/crapthe-four-principles-of-sound-design/.
Sollenberger, K. (2012). 10 user interface design fundamentals.
http://blog.teamtreehouse.com/10-user-interface-design-fundamentals.
Stern, M. (2014). Designing intuitive user experiences.
https://developer.apple.com/videos/play/wwdc2014/211/ Timestamp: 32:00.
TeacherToolkit (2014). Can semiotics be used to improve teaching and learning?
http://www.teachertoolkit.me/2014/01/26/
can-semiotics-be-used-to-improve-teaching-and-learning-by-teachertoolkit/.
Wroblewski, L. (2015). The mystery meat of mobile navigation.
https://twitter.com/lukew/status/590911111358242816.
YouTube (2016). https://www.youtube.com/.
Anders Kokholm
Side 13 / 22
Medieskolerne Viborg
Bilag A. Brugervenlig Design
Side 15 / 22
Bilag A
Brugervenlig Design
A.1
Digital Medie Forbrug Igennem Årene
Figur A.1: Oversigt over voksne amerikaners medie forbrug fordelt på enheds-kategori.
Figur Kilde: [Allen, 2015]
Anders Kokholm
Side 15 / 22
Medieskolerne Viborg
Bilag A. Brugervenlig Design
A.2
Side 16 / 22
Semiotik - Studiet Af Tegn Og Symboler
Videnskaben om Semiotik blev blandt andet formuleret af Charles Sanders Peirce, en amerikansk videnskabsmand og filosof, i starten af 1900-tallet. Peirce opdelte semiotik ind i tre grupper. Ikoner, Indekser
og Symboler. Se Figur A.2. [Dewey et al., 2007].
Figur A.2: Grafisk illustration af Peirce´s 3 semiotik grupper.
Figur Kilde: [TeacherToolkit, 2014]
Hvilken gruppe et specifikt tegn befinder sig i, er afhængig af forholdet mellem den egentlige betydning af tegnet og hvordan den henviser til objektet.
Ikoner er tegn som har en lighed med de objekter som de henviser til. Eksempler er landkort og billeder, men også mere abstrakte begreber som metaforer er ikoner.
Indekser er tegn som har et direkte link imellem tegnet og objektet, men ikke via en grafisk lighed
som ikoner er. Nærmere en slags handling og effekt. Eksempel på indekser er billed af røg som indeks
for ild og et termometer som indeks for kropstemperatur.
Til sidst er der symboler. Symboler har ingen direkte link eller lighed imellem tegnet og objektet det
symbolisere. Symbolers betydning er derfor noget man skal lære, enten ud fra generelle regler eller via
specifikke erfaringer. Sproget, det talte såvel som det skrevne, er symboler. På en endnu mindre skala
er også de enkelte bogstaver, tal og skrifts-tegn også symboler. Dem sammensætter vi i en pre-defineret
struktur til at danne nye symboler. Der er ingen direkte forbindelse imellem hvordan vi for eksempel
siger eller skriver kat og hvordan objektet ser ud. Men efter man har lært at de tre symboler ’K’, ’A’
og ’T’ til sammen henviser til et husdyr, så vil man uden besvær lave den sammenkobling fremover.
[Dewey et al., 2007].
Anders Kokholm
Side 16 / 22
Medieskolerne Viborg
Bilag A. Brugervenlig Design
A.3
Side 17 / 22
Designing Intuitive User Experiences - Udskrift
”I promise I’m going to talk about other things. But I feel like I would be remiss if I didn’t use this opportunity to
talk with you about hamburger menus, aka slide out menus, aka sidebars, aka basements, aka drawers.
Now, these controls are very common on iOS, and on other platforms. And I’m sure many of you here work
on apps that have these. You guys made the decision to put it in your app. And I’m sure that you did so with the
very best of intentions. And I will say that these controls do a couple of things very well.
For one thing, they save space. So rather than taking up a bunch of room at the bottom of the screen for a tab
bar, you’re just taking up a little bit of area in the top left corner for the hamburger menu. And you practically
have the entire height of the screen to show options to people, and if that’s not enough, you’re going to cram more
awesomeness into your app, people can scroll, right.
I actually haven’t played around with the latest version of Xcode, so I really hope that they haven’t changed
this, I don’t believe you’ll find a hamburger menu controller inside of Xcode.
Now, typically we don’t provide design advice about the things that we don’t offer to you guys, but I can’t help
myself, right? I’ve had so many conversations with people about this control, spending hours and hours and hours
talking about it, and you know, I think it’s important that we talk about it here today. And again, I’m not going
to say that there’s no place for these controls categorically. I think there are some apps that could maybe use one.
But I will say that their value is greatly over-stated, and they have huge usability downsides too.
Remember, the three key things about an intuitive navigation system is that they tell you where you are, and
they show you where else you can go.
Hamburger menus are terrible at both of those things, because the menu is not on the screen. It’s not visible.
Only the button to display the menu is. And in practice, talking to developers, they found this out themselves.
That people who use their app don’t switch to different sections very frequently when they use this menu.
And the reason for that is because the people who use their app don’t know where else they can go. Right? They
don’t know because they can’t see the options, or maybe they saw it at one point in time, but they have since
forgotten. And if you use this control, you have to recognize that the people who use your app may not realize the
full potential of your app. Hamburger menus are also just tedious, right?
If you want to switch sections from the Accounts tab to the Transfers tab, all you need to do is tap the button
and you’re there instantly, and if you want to go back, you tap the Accounts button, and you’re back where you
started from.
Doing the same thing with the hamburger menu involves opening the menu, waiting for the animation to finish,
re-orienting yourself, finding the option you’re interested in, tapping that, and then waiting for the animation to
complete, getting back to where you were before, and if you want to go back, you have to open the menu again, go
through that whole process, and there you are, again.
Anders Kokholm
Side 17 / 22
Medieskolerne Viborg
Bilag A. Brugervenlig Design
Side 18 / 22
It takes at least twice as many taps to change sections. Something that should be very easy and fluid is made
more difficult.
And the other thing the hamburger menus quite frankly do badly is that they don’t play nicely with back buttons. Right? I’ve seen this a lot. Back buttons are supposed to go in that top left corner position, but instead
there’s this hamburger menu there, so people put the back button right next to it, but no longer does this look like
a back button anymore, it just looks like this arrow which is pointing to the hamburger menu, looks ridiculous,
and sometimes people recognize that it looks ridiculous, so when you drill down into the hierarchy of an app, the
hamburger menu goes away.
Now it takes even more steps to switch to a different section.
You have to go back up enough times to get to a level in the hierarchy of an app to get to a view that contains the
hamburger menu. Now, sometimes people will try to solve this by putting the menu on the right-hand side, but
that’s not advisable either. That location is a really important location. Usually you can put some kind of action
there, you know, like a plus sign to add something, or an edit button.
And finally, the downside of being able to show a lot of options is that you can show a lot of options. Is that
you will show a lot of options. The potential for bloat and misuse is tremendous. They allow you to add all sorts of
stuff that your users don’t really care about. Like information about the app. Or version history, or credits. I hate
to break it to you, but no one cares.
And the other thing is that people wind up taking ads and special offers and making them look just like regular sections and putting it in there too. That sucks. No one wants that either.
Look, drawers of any kind have a nasty tendency to fill with junk.”
Citat Kilde: [Stern, 2014].
Udskrift Kilde: [Limcaco, 2014].
Anders Kokholm
Side 18 / 22
Medieskolerne Viborg
Bilag A. Brugervenlig Design
A.4
Side 19 / 22
CRAP Guide
Figur A.3: Reference guide til CRAP design princippet.
Figur Kilde: [Paper Leaf, 2012]
Anders Kokholm
Side 19 / 22
Medieskolerne Viborg
Bilag B. Hamburgeren
Side 20 / 22
Bilag B
Hamburgeren
B.1
Hamburger Eksempler
Figur B.1: Seks forskellige hamburger layouts.
Figur Kilde: Fra venstre top:
Best Buy, Elgiganten
Burger King, Curveagency
Usabilitygeek, Sport 24
Anders Kokholm
Side 20 / 22
Medieskolerne Viborg
Bilag B. Hamburgeren
B.2
Side 21 / 22
Facebook Mobil Layout
Figur B.2: Til venstre er Facebooks layout i 2009. Til højre 2010.
Figur Kilde: [Paper Leaf, 2012]
Anders Kokholm
Side 21 / 22
Medieskolerne Viborg
Bilag B. Hamburgeren
B.3
Side 22 / 22
Youtube Mobil Layout
Figur B.3: Veldesignet mobil layout af Google på Youtube.com
Figur Kilde: [YouTube, 2016]
B.4
Andkok.dk - Portføje Designet Med Få Menupunkter
Figur B.4: Min egen portefølje. Er designet så der er få menupunkter.
Figur Kilde: [Kokholm, 2016]
Anders Kokholm
Side 22 / 22
Medieskolerne Viborg