{"id":4263,"date":"2015-12-23T01:52:22","date_gmt":"2015-12-23T00:52:22","guid":{"rendered":"https:\/\/wbvb.nl\/?p=4263"},"modified":"2021-10-13T10:19:26","modified_gmt":"2021-10-13T08:19:26","slug":"over-een-hamburger-icoon-en-spaghetti-menus","status":"publish","type":"post","link":"https:\/\/admin.wbvb.nl\/over-een-hamburger-icoon-en-spaghetti-menus\/","title":{"rendered":"Frikandellen, hamburger-icoontjes en spaghetti-menu’s"},"content":{"rendered":"
\"flying
Spaghettimonstermenu. (SVG-versie<\/a>)<\/figcaption><\/figure>\n

Vasilis van Gemert onderricht het jonge volk dat straks onze websites maakt. Hij schreef een stukje naar aanleiding van een discussie\u00a0met een collega over de vraag: “Moeten we studenten laten slagen als ze een hamburger-icoon gebruiken in hun website?” Want je weet: een hamburger-icoontje is van uit het standpunt van gebruiksvriendelijkheid eigenlijk\u00a0not done<\/em>. Ik heb geen idee of zijn studenten zullen slagen. Wat ik wel weet is dat ik een icoontje heb voor een spaghetti-menu (in PNG-formaat<\/a> en in SVG-formaat<\/a>). En dat ik vind dat je zo’n icoontje niet moet gebruiken. Tenzij.<\/p>\n

Wat is\u00a0een hamburger-icoon?<\/h2>\n

Voor wie het niet weet wat een hamburger-icoontje is, dat is een plaatje met drie rechthoekjes boven elkaar: \"Drie Dit lijkt op\u00a0drie plakken vlees, zoals je soms op een hamburger krijgt. Of 1 plak vlees tussen twee stukken brood. Een vorm van mystery meat navigatio<\/em>n dus: een navigatie-element waaraan je niet kunt zien waarheen een link leidt. Geen beschrijving, geen duidelijke indicatie. Waar je heen gaat blijft een verrassing. Dat is niet handig:\u00a0hoe meer je verbergt, hoe minder je ziet. Luke Wroblewski toont de veelvormigheid van mystery meat navigation<\/em> in mobiele apps:<\/p>\n

\"Luke<\/a>
Luke Wroblewski – The Mystery Meat of Mobile Navigation<\/a><\/figcaption><\/figure>\n

Mag dat?<\/h2>\n

Is een hamburger-icoontje altijd een slecht idee? Eh, neen, niet altijd. Is een hamburger-icoontje altijd een goed\u00a0idee? Eh, neen, niet altijd.<\/p>\n

\"De<\/a>
‘Hemel’ is ook een hamburgermenu. De acht trigrammen uit de I Tjing<\/a><\/figcaption><\/figure>\n

Vaak wordt het gebruikt op sites die\u00a0door een luie informatie-architect en een\u00a0luie designer zijn gemaakt. Als ‘Ik vind het niet mooi’ een argument is om de\u00a0menubalk\u00a0weg te stoppen, zit je dus alleen voor je designer-vriendjes een site te maken. Dat mag natuurlijk. Maar het is niet echt tof\u00a0voor alle andere mogelijke bezoekers van je site. Of je bezoekers drie streepjes op elkaar snappen, hangt van hun ervaring af.\u00a0Het kan zijn dat je gebruikers fanatieke I-Tjing-lezers zijn. Dan verwachten ze dat je website direct naar de hemel verwijst<\/a>.\u00a0Webnerds en webdesigners die hele dagen op het web zitten zullen het waarschijnlijk herkennen. Maar weet je zeker dat je buurman het begrijpt? Hij zit niet elk uur van de dag op internet.\u00a0Je weet wat ze zeggen over aannames, he<\/a>?\u00a0In mobiele apps is het icoontje al iets minder onbekend (zie Luke W’s plaatje<\/a>). Maar ook daar zijn interessante verschillen te zien in het gebruik ervan.<\/p>\n\n\n\n\n\n\n\n\n\n
Niet-uitputtende lijst met design-opties voor een hamburger-icoon<\/caption>\n
Icoon<\/th>\nBeschrijving<\/th>\nBruikbaarheid<\/th>\n<\/tr>\n
\"01_-_alleen_icoon_geen_rand\"<\/th>\nIcoon zonder rand of achtergrondkleur<\/td>\nIdeaal als je echt een hekel aan je bezoeker hebt. Deze kun je bijvoorbeeld zonder achtergrond gebruiken op een grote stockfoto. Zo vergroot je de kans\u00a0dat niemand je menu gebruikt<\/td>\n<\/tr>\n
\"02_-_alleen_icoon_wel_rand\"<\/th>\nIcoon met een rand en achtergrondkleur<\/td>\nDeze is al wat vriendelijker voor je gebruiker. Door de rand en achtergrond suggereer je dat je kunt iets kunt doen\u00a0met dit element op de pagina. Met andere woorden: de affordance<\/a><\/em> is groter.<\/td>\n<\/tr>\n
\"03_-_icoon_met_tekst_geen_rand\"<\/th>\nIcoon met tekst, zonder rand of achtergrondkleur<\/td>\nEen beschrijving vertelt in ieder geval al duidelijk waar dit element voor dient. Maar dit is wel een opzet die veel schermruimte kost. Dat is niet handig op kleine schermen.<\/td>\n<\/tr>\n
\"04_-_icoon_met_tekst_wel_rand\"<\/th>\nIcoon met tekst, rand en\u00a0achtergrondkleur<\/td>\nAffordance<\/em>, maar kost veel schermruimte<\/td>\n<\/tr>\n
\"05_-_kleine_icoon_met_tekst_wel_rand\"<\/th>\nKleine rechthoekige knop met tekst<\/td>\nOp kleine schermen is de tekst waarschijnlijk slecht te lezen. Maar dit is in veel gevallen een goede oplossing<\/td>\n<\/tr>\n
\"06_-_kleine_icoon_met_tekst_wel_rand\"<\/th>\nEen rond design met icoon en tekst<\/td>\nDoor de ronde vorm zal deze knop beter opvallen. Dat zorgt er voor dat je gebruiker waarschijnlijk vaker dit menu zal gebruiken. Een nadeel is dat andere elementen minder opvallen. Maar past het in je website-ontwerp?<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Het argument van Vasilis was: een goed navigatiemenu zegt iets zinnigs over de structuur van de site. Als die structuur waardeloos is, is het menu dus ook waardeloos. Daarom kun je beter een onzinnig icoontje gebruiken om je menu helemaal te verwijderen, namelijk een spaghetti-icoontje. Luiheid en cynisme zijn wat mij betreft slechte redenen om iets te verbergen. Als je menustructuur blijkbaar zo onzinnig is dat je het moet verbergen, heb je een signaal te pakken dat je website nog niet goed genoeg is. Dat is fijn, want dan heb je meer werk. Nadelen\u00a0van een menu-icoontje: je verbergt iets. Alles wat je verbergt, ziet je gebruiker niet en de meeste gebruikers zijn niet geneigd om moeite te doen voor iets waar ze niet direct nut van verwachten. Het nut van een navigatiemenu vervliegt zo een beetje. Daarnaast, als je bezoeker al benieuwd is, moet hij een extra handeling verrichten. Een hele extra klik, ja. Hoe minder kliks, hoe meer vreugd.<\/p>\n

Dus<\/h2>\n

Zoals altijd: “It depends<\/em>“. Of zo’n icoontje goed werkt op je site hangt af van:<\/p>\n