{"id":101480,"date":"2022-10-22T21:22:18","date_gmt":"2022-10-23T02:22:18","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/vad-ar-hamburgerknappen-och-hur-anvands-den\/"},"modified":"2022-10-22T21:22:18","modified_gmt":"2022-10-23T02:22:18","slug":"vad-ar-hamburgerknappen-och-hur-anvands-den","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/vad-ar-hamburgerknappen-och-hur-anvands-den\/","title":{"rendered":"Vad \u00e4r hamburgerknappen och hur anv\u00e4nds den?"},"content":{"rendered":"<div>\n<p>En hamburgerknapp l\u00e5ter gott, eller hur?  Det kanske g\u00f6r dig hungrig, men hamburgerknappen har faktiskt inget med hamburgare att g\u00f6ra.  Tro det eller ej, det \u00e4r en term som ofta anv\u00e4nds f\u00f6r menyknappar i appar.<\/p>\n<p>Faktum \u00e4r att de flesta av oss anv\u00e4nder denna ikon dagligen.  Ikonen med tre staplade linjer du ser n\u00e4r du v\u00e4xlar en meny eller navigeringsf\u00e4lt i en app \u00e4r en hamburgerknapp.<\/p>\n<p>S\u00e5 var kommer detta namn ifr\u00e5n och varf\u00f6r anv\u00e4nds det?  L\u00e5t oss ta reda p\u00e5.<\/p>\n<h2 id=\"the-origin-of-the-hamburger-button\"><span class=\"ez-toc-section\" id=\"Ursprunget_till_hamburgerknappen\"><\/span>  Ursprunget till hamburgerknappen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<figure>\n<\/figure>\n<p>Hamburgerknappen har funnits sedan 1980-talet.  Dess namn kommer fr\u00e5n dess design: de tre dj\u00e4rva horisontella linjerna som liknar en hamburgare.  \u00c4ven k\u00e4nd som den hopf\u00e4llbara menyikonen skapades hamburgerknappen av Norm Cox som en del av anv\u00e4ndargr\u00e4nssnittet f\u00f6r Xerox Star, en av de f\u00f6rsta moderna kommersiella persondatorerna.<\/p>\n<p>P\u00e5 grund av den tidens designbegr\u00e4nsningar beh\u00f6vde ikonen som representerar en meny med ytterligare alternativ vara n\u00e5got enkelt.  De tre parallella dj\u00e4rva linjerna uppfyllde behovet och gav anv\u00e4ndargr\u00e4nssnittet ett minimalistiskt utseende.  Linjerna \u00e4r en abstrakt skildring av en vertikal lista med alternativ och funktioner som finns inuti den.<\/p>\n<h2 id=\"what-made-the-hamburger-icon-popular\"><span class=\"ez-toc-section\" id=\"Vad_gjorde_hamburgerikonen_popular\"><\/span>  Vad gjorde hamburgerikonen popul\u00e4r?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Burgerikonen blev mer framtr\u00e4dande med tillkomsten av smartphones och mobilappar.  Med de nya och mindre anv\u00e4ndargr\u00e4nssnitten var det sv\u00e5rt att f\u00e5 plats med de flesta alternativen p\u00e5 sk\u00e4rmen.  F\u00f6r att underl\u00e4tta navigeringen var utvecklarna tvungna att stoppa undan dem i en meny, och hamburgerikonen visade sig vara anv\u00e4ndbar f\u00f6r detta \u00e4ndam\u00e5l.<\/p>\n<p>\u00c4ven om det \u00e4r uppe f\u00f6r debatt vilken app som anv\u00e4nde den f\u00f6rst, kan Tweetie-appen fr\u00e5n Twitter ha varit en av de f\u00f6rsta moderna apparna som anv\u00e4nde ikonen.  Strax efter fick hamburgerikonen st\u00f6rre popularitet n\u00e4r den antogs av Facebook och Google i mobilappar.<\/p>\n<p>P\u00e5 grund av ikonens rena utseende och tydliga syfte har hamburgerknappen blivit go-to-ikonen f\u00f6r appar och webbplatser att placera sina navigeringsalternativ i sedan dess.<\/p>\n<h2 id=\"what-is-the-hamburger-icon-used-for\"><span class=\"ez-toc-section\" id=\"Vad_anvands_hamburgerikonen_till\"><\/span>  Vad anv\u00e4nds hamburgerikonen till?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Som n\u00e4mnts ovan f\u00f6rklarar designen av ikonen dess ursprungliga syfte.  Det syftet \u00e4r ungef\u00e4r detsamma idag.<\/p>\n<p>Men funktionen f\u00f6r hamburgerikonen i appar \u00e4r slankare nu, p\u00e5 grund av framsteg inom teknik och design.  Det anv\u00e4nds nu ofta f\u00f6r menyer som glider eller kollapsar in och ut fr\u00e5n sidan av sk\u00e4rmen.  Genom att trycka p\u00e5 ikonen \u00f6ppnas en sidomeny med ett urval av olika alternativ och funktioner.<\/p>\n<p>H\u00e4r \u00e4r ett exempel p\u00e5 hamburgerikonen som anv\u00e4nds i Samsung Galaxy Store-appen.  Genom att trycka p\u00e5 ikonen i det \u00f6vre v\u00e4nstra h\u00f6rnet kommer du \u00e5t olika menyalternativ.<\/p>\n<p>N\u00e4r folk anv\u00e4nder nya appar kan det vara sv\u00e5rt att tolka de olika ikonerna p\u00e5 sk\u00e4rmen.  Den st\u00f6rsta f\u00f6rdelen med hamburgerikonen \u00e4r att den omedelbart k\u00e4nns igen f\u00f6r alla som \u00e4r bekanta med mobildesign.  Ikonen \u00e4r utbredd, vilket g\u00f6r den l\u00e4tt att tolka utan n\u00e5gon f\u00f6rklaring.<\/p>\n<p>Hamburgerikonen tar n\u00e4stan ingen plats, vilket g\u00f6r det m\u00f6jligt att placera den var som helst p\u00e5 sk\u00e4rmen utan att st\u00f6ra andra element.  Allt h\u00f6r inte hemma p\u00e5 huvudsidan p\u00e5 din sk\u00e4rm, s\u00e5 ikonen g\u00f6r ett bra jobb med att tillhandah\u00e5lla en f\u00f6rdefinierad plats f\u00f6r navigeringselement.<\/p>\n<p>Som vi har sett erbjuder hamburgerknappen m\u00e5nga f\u00f6rdelar, som enkel navigering och ett rent anv\u00e4ndargr\u00e4nssnitt.  Det inneh\u00e5ller dock n\u00e5gra nackdelar, som har f\u00e5tt apputvecklare att flytta bort och \u00f6verv\u00e4ga alternativ.<\/p>\n<p>Med telefoner som hela tiden f\u00e5r st\u00f6rre displayer, blir det sv\u00e5rare att n\u00e5 de platser d\u00e4r hamburgerknappen vanligtvis finns.  Detta g\u00f6r anv\u00e4ndarupplevelsen mindre engagerande och att anv\u00e4nda appar mindre bekv\u00e4m.<\/p>\n<figure>\n<\/figure>\n<p>N\u00e4r du \u00f6ppnar en app f\u00f6r f\u00f6rsta g\u00e5ngen kommer du naturligtvis att leta efter dess nyckelfunktioner.  Hamburgerikonen d\u00f6ljer ofta de flesta viktiga alternativ, vilket g\u00f6r gr\u00e4nssnittet mindre uppt\u00e4ckbart f\u00f6r nykomlingar.<\/p>\n<p>Att placera framtr\u00e4dande funktioner i en menyknapp g\u00f6r ocks\u00e5 att de k\u00e4nns mindre viktiga.  Det f\u00e5r dig att t\u00e4nka om dessa alternativ inte var tillr\u00e4ckligt viktiga f\u00f6r att l\u00e4ggas upp p\u00e5 startsk\u00e4rmen, kanske de inte \u00e4r v\u00e4rda att kolla in.<\/p>\n<h2 id=\"alternatives-to-the-hamburger-icon\"><span class=\"ez-toc-section\" id=\"Alternativ_till_Hamburgerikonen\"><\/span>  Alternativ till Hamburgerikonen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Navigationsf\u00e4lt har blivit ett mer popul\u00e4rt och effektivt s\u00e4tt att organisera menyknappar.  Ist\u00e4llet f\u00f6r att d\u00f6lja viktiga funktioner bakom menyikonen, arrangerar navigeringsf\u00e4ltet flera ikoner p\u00e5 hemsk\u00e4rmen.<\/p>\n<p>Navigeringsf\u00e4ltet tillhandah\u00e5ller menyikoner som \u00e4r tydliga att f\u00f6rst\u00e5 och d\u00e4rf\u00f6r \u00e4r mer engagerande.  Hamburgerknappar saknar denna tydlighet, s\u00e5 de f\u00e5r inte samma niv\u00e5 av engagemang.<\/p>\n<p>Som ett exempel f\u00f6renklade Google Play Butik sitt gr\u00e4nssnitt genom att g\u00f6ra om det med ett navigeringsf\u00e4lt.  Det f\u00e4ltet l\u00e4ngst ner visar viktiga funktioner.  F\u00f6r att komma \u00e5t andra alternativ trycker du p\u00e5 din profilikon i det \u00f6vre h\u00f6gra h\u00f6rnet.<\/p>\n<p>Ett navigeringsf\u00e4lt l\u00e5ter dig se fler k\u00e4rnfunktioner och funktioner p\u00e5 startsk\u00e4rmen.  Du kan se flera ikoner i f\u00e4ltet med en blick.  Dessutom \u00e4r dessa staplar vanligtvis l\u00e4ngst ner p\u00e5 sk\u00e4rmen, vilket \u00e4r mycket l\u00e4ttare att n\u00e5 \u00e4n de \u00f6vre h\u00f6gra eller \u00f6vre v\u00e4nstra, d\u00e4r hamburgerikoner vanligtvis bor.<\/p>\n<p>Men precis som hamburgerikonen har navigeringsf\u00e4lt sina nackdelar.  \u00c4ven om de har de b\u00e4sta funktionerna l\u00e4ngst fram, \u00e4r de bara begr\u00e4nsade till endast fyra eller fem val.  S\u00e5 om appen vill visa upp viktigare funktioner m\u00e5ste den anv\u00e4nda n\u00e5got annat ut\u00f6ver navigeringsf\u00e4ltet.<\/p>\n<p>Det b\u00e4sta alternativet skulle kanske vara att inf\u00f6rliva b\u00e5de en navigeringsf\u00e4lt och en hamburgerikon.  Navigeringsf\u00e4ltet kan visa upp de markerade funktionerna i appen, medan de andra funktionerna kan vara undang\u00f6mt i hamburgerikonen.<\/p>\n<figure>\n<\/figure>\n<p>Facebook \u00e4r ett popul\u00e4rt exempel p\u00e5 detta.  I dess navigeringsf\u00e4lt kan du trycka p\u00e5 hamburgermenyn f\u00f6r att komma \u00e5t alla dess andra funktioner.<\/p>\n<h2 id=\"the-future-of-the-hamburger-icon\"><span class=\"ez-toc-section\" id=\"Hamburgerikonens_framtid\"><\/span>  Hamburgerikonens framtid<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Hamburgerknappen har anv\u00e4nts som en g\u00e5-till-menyikon l\u00e4nge nu, s\u00e5 de flesta \u00e4r ganska vana vid det.  Dess minimalistiska tillv\u00e4gag\u00e5ngss\u00e4tt och tydliga syfte har gjort den allm\u00e4nt igenk\u00e4nd f\u00f6r alla som har anv\u00e4nt en smartphone.<\/p>\n<p>Men p\u00e5 grund av n\u00e5gra nackdelar med hamburgerikonen har m\u00e5nga popul\u00e4ra appar, inklusive Google Play Store, Instagram och Twitter, b\u00f6rjat anamma navigeringsf\u00e4ltet ist\u00e4llet.  Navigeringsf\u00e4ltet kan fungera som ett b\u00e4ttre alternativ till hamburgerikonen, men den \u00e4r inte helt integrerad i varje app \u00e4nnu.  Som ett resultat kommer vi fortfarande att se hamburgerikonen anv\u00e4ndas regelbundet under en tid.<\/p>\n<p>Hamburgerikonen \u00e4r inte perfekt, men den kan f\u00f6rb\u00e4ttras genom att kombinera den med alternativa navigeringselement.  Det \u00e4r viktigt att se till att alla verktyg som appar anv\u00e4nder \u00e4r tydliga f\u00f6r anv\u00e4ndarna.<\/p>\n<p>    <strong class=\"section-sub-title\">Om f\u00f6rfattaren<\/strong><\/p>\n<p>            <strong class=\"bio-title\">Shreeya Deshpande (13 artiklar publicerade)<br \/><\/strong><\/p>\n<p>Shreeya \u00e4r en teknikentusiast och tycker om att h\u00e4nga med i de senaste tekniska framstegen.  N\u00e4r hon inte skriver om teknik kan du hitta henne p\u00e5 resande fot eller l\u00e4sa hennes favoritroman!<\/p>\n<p>                            Mer fr\u00e5n Shreeya Deshpande<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Prenumerera_pa_vart_nyhetsbrev\"><\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, gratis e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n<p>Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n  <div id=\"ez-toc-container\" class=\"ez-toc-v2_0_88 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blogging-techies.com\/sw\/vad-ar-hamburgerknappen-och-hur-anvands-den\/#Ursprunget_till_hamburgerknappen\" >Ursprunget till hamburgerknappen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blogging-techies.com\/sw\/vad-ar-hamburgerknappen-och-hur-anvands-den\/#Vad_gjorde_hamburgerikonen_popular\" >Vad gjorde hamburgerikonen popul\u00e4r?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blogging-techies.com\/sw\/vad-ar-hamburgerknappen-och-hur-anvands-den\/#Vad_anvands_hamburgerikonen_till\" >Vad anv\u00e4nds hamburgerikonen till?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/blogging-techies.com\/sw\/vad-ar-hamburgerknappen-och-hur-anvands-den\/#Alternativ_till_Hamburgerikonen\" >Alternativ till Hamburgerikonen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/blogging-techies.com\/sw\/vad-ar-hamburgerknappen-och-hur-anvands-den\/#Hamburgerikonens_framtid\" >Hamburgerikonens framtid<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/blogging-techies.com\/sw\/vad-ar-hamburgerknappen-och-hur-anvands-den\/#Prenumerera_pa_vart_nyhetsbrev\" >Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n ","protected":false},"excerpt":{"rendered":"<p>En hamburgerknapp l\u00e5ter gott, eller hur? Det kanske g\u00f6r dig hungrig, men hamburgerknappen har faktiskt inget med hamburgare att g\u00f6ra. Tro det eller ej, det \u00e4r en term som ofta anv\u00e4nds f\u00f6r menyknappar i appar. Faktum \u00e4r att de flesta av oss anv\u00e4nder denna ikon dagligen. Ikonen med tre staplade linjer du ser n\u00e4r du [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":101481,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[5],"tags":[593,24,122,48339,27,26,23],"class_list":["post-101480","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bloggar","tag-anvands","tag-ar","tag-den","tag-hamburgerknappen","tag-hur","tag-och","tag-vad"],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/posts\/101480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/comments?post=101480"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/posts\/101480\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/media\/101481"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/media?parent=101480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/categories?post=101480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/tags?post=101480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}