Hoe het Hamburger-pictogram probleem op te lossen
Het hamburgersymbool - drie kleine staven die worden gebruikt om een link naar een menu aan te duiden - is er een als de meest controversiële technieken op het internet nu. Van ontwerpers wordt ons verteld dat ze het allemaal haten; klanten, we vertellen het iedereen, haten het ook. Waarom is het dan overal?
Het hamburgersymbool is gemakkelijk schaalbaar en past precies in een pixelraster. Het was oorspronkelijk een lijstpictogram dat is samengebald in zijn huidige rol, maar omdat een menu gewoon een lijst met opties is, is het semantisch correct om het lijstitem op deze manier te gebruiken.
Er is enorm veel gedebatteerd, A / B-tests, blogs en gebruikersonderzoeken uitgevoerd over het onderwerp, maar deze studies zijn bijna altijd gericht op app-ontwerp. Wanneer het hamburgerpictogram wordt gebruikt in webontwerp, duidt dit op een veel groter probleem.
Het probleem met het hamburgerpictogram
Er zijn genoeg ontwerpers die twijfelen aan de waarde van het hamburgersymbool zelf. Het wordt vaak gezien als een pictogram in iOS-stijl, hoewel het op deze manier werd gebruikt voordat Apple het opnam.
Er is zelfs een groot aantal tegenstrijdige bewijzen dat het hamburgersymbool bruikbaar is als een indicatie van een menu. Sommige ontwerpers beweren dat het pictogram gemakkelijk wordt herkend door een jongere demografie, anderen suggereren dat een oudere demografie het herkent als het web geletterd is. De enige conclusie die we echt uit dit bewijs kunnen trekken, is dat gebruikerstests niet doorslaggevend zijn gebleken, waarbij parallelle tests vaak tegenstrijdige resultaten opleveren.
Algemeen wordt aangenomen dat gebruikers het hamburgersymbool niet herkennen als een enkele link, waarschijnlijk omdat het is ontworpen om eruit te zien als een groep links in plaats van één ding. Iets dat wordt ondersteund, is dat het pictogram van een hamburger met een rand omgeeft of een achtergrond geeft, zodat het lijkt op een knopachtige vorm die, zeg ik, meer skeuomorfisch is, resulteert in meer klikken.
Meer problemen met het hamburgersymbool
Afgezien van het ontwerp van het pictogram zelf, is de aanpak van het gebruik van een hamburgersymbool ook vol problemen.
Ten eerste, en misschien het belangrijkst, voegt het hamburgerpictogram een extra actie aan uw navigatie toe; wanneer er één klik nodig is om een bepaalde pagina te bereiken, zijn er nu twee nodig. De vuistregel voor webontwerpers is altijd een maximum van drie klikken geweest (waar mogelijk), zo ver van het oplossen van een navigatieprobleem, dat de hamburgoonpictogramtechniek eenvoudig het ene probleem voor het andere uitwisselt. Dat is natuurlijk niet alleen een probleem voor het hamburgersymbool, het is ook een probleem voor elke navigatie die op deze manier wordt uitgelegd. U kunt het woord 'Menu' gebruiken in plaats van het hamburgersymbool en u zult dezelfde belemmering hebben, het verschil is dat het hamburgersymbool niet op een andere manier kan worden gebruikt.
De hamburger-techniek verbergt ook de inhoud ervan. Vanuit het oogpunt van UX hoeven gebruikers geen actie te ondernemen om erachter te komen welke acties ze kunnen ondernemen. Het is maar al te gemakkelijk om te vergeten om te 'delen op Twitter' of 'naar Checkout' te gaan, wanneer die opties niet direct voor je liggen. Gebruikers gaan gewoon niet op zoek naar een link waarvan ze niet weten dat ze bestaat.
Ten slotte verbergt de hamburger-pictogramtechniek de huidige staat van uw site en de positie van de gebruiker daarin. Omlaagstatussen in een menu bieden contextuele informatie aan een gebruiker die de hamburgersymbooltechniek onduidelijk maakt.
Wat doet het hamburgerpictogram goed?
Aangezien het hamburgersymbool universeel gehaat is en resulteert in een reeks problemen, waarom wordt het dan overal gebruikt?
In mijn ervaring, zeker onder bepaalde demografische gegevens, is het hamburgersymbool onlangs zo gemakkelijk herkend. Studies die weerleggen die de neiging hebben om een jaar of meer oud en een jaar te zijn, staan lang op het interweb.
In feite is het koppelingspictogram veel herkenbaarder dan het koppelingspictogram of deelpictogram, waarvan de definitieve vormen nog moeten verschijnen. Het hamburgersymbool is consistent in een groot aantal verschillende ontwerpen.
Het belangrijkste is dat het hamburgersymbool doet wat het wil: het bespaart ons een hoop schermvastgoed. Als een klant je een lijst met gagillion-items voorstelt die aan een menu moeten worden toegevoegd, is het verschuiven van het scherm en het linken ervan een ruwe, maar effectieve manier om ruimte te maken voor de inhoud die de klant ook wil.
Ik zou willen zeggen dat het hamburgersymbool het probleem beter oplost dan andere oplossingen, maar het is niet waar. In plaats daarvan zal ik zeggen dat het hamburgersymbool het probleem minder slecht oplost dan andere oplossingen.
De oorzaak van het probleem
Het hamburger-pictogram wordt meestal gebruikt omdat ontwerpers - of vaker klanten - niet volledig inzetten op een mobiel-eerst-benadering. Ze willen een 'gewone' site, maar geperst op de telefoon van hun kleindochter.
Tegenstanders van het hamburgersymbool hebben de neiging om het te vervangen door het woord 'Menu'-door dit te doen missen ze het punt helemaal. Het hamburgersymbool heeft, of je het leuk vindt of niet, nu zijn betekenis, maar gebruikers die begrijpen waar de knop voor is, lossen niet het grootste probleem op, namelijk dat het verbergen van onze navigatie, het verbergen van de opties van onze gebruikers, een vreselijke daad van zelf is -sabotage.
Kortom, het hamburgerpictogram is een symptoom van ons collectief falen om alle aspecten van de mobiel-eerst benadering volledig te omarmen.
Een betere oplossing
Om het hamburgerprobleem op te lossen, moeten we accepteren dat het internet zoals we het kennen niet werkt. De opkomst van het mobiele web betekent veel meer dan het verminderen van het aantal kolommen dat we gebruiken en het verwijderen van enkele van de zwaardere afbeeldingsbestanden.
Het mobiele web wordt op een andere manier gebruikt dan het oude web. Het mobiele web bestaat in de context van speciale apps en gebruikers verwachten dat het internet op dezelfde manier wordt ervaren.
De app van Facebook heeft hun hamburgerpictogram op een bekende manier geruild voor een tabbladenbalk en zag daardoor verbeterde conversies. Maar Facebook heeft iets veel belangrijker gedaan dan het ruilen van menu-ontwerpen. Onlangs hebben ze hun Messenger-app uitgebracht, en het probleem was dat ze al een perfect functionele en populaire app hadden waarmee ze de berichten konden integreren. Facebook heeft zijn functies opgesplitst, door de rol van elke app die ze hebben gekregen te concentreren op twee eenvoudige apps in plaats van één complexe. De verminderde functionaliteit resulteert in een beperkte set menu-opties en minder behoefte aan een hamburgermenu.
Goede apps zijn zeer gericht en ze zijn op die manier geëvolueerd door veel rigoureuzere gebruikerstests dan waaraan het web is onderworpen. Om een app-achtige ervaring te creëren, moeten we onze sites vereenvoudigen, opnieuw vereenvoudigen en dan een beetje meer vereenvoudigen. Breek, indien nodig, je architectuur af in beheersbare hapklare stukjes, microsites bijna. Wanneer we onze gebruikers een eenvoudige reeks opties presenteren, doet zich nooit een probleem voor met een complex menu.
Gebruik maken van het hamburgersymbool is als het slaan van een pleister op een blessure: het maakt het vast, maar eronder is nog steeds iets gebroken.
Alleen als we een mobiel-eerst benadering volledig omarmen en deze niet alleen toepassen op ons ontwerp, maar ook op onze inhoud en onze informatiearchitectuur, zullen we het hamburgermenu naar de geschiedenis sturen.
Uitgelichte afbeelding / miniatuur, gebruik Hamburger afbeelding via Mononc 'Paul