Ikona hamburgeru: nové využitie. Prečo by ste sa mali vyhýbať hamburgerovým menu a ako na to

Bude pre vás ťažšie poskytnúť používateľovi informácie o konkrétnej položke, ak budú viditeľné iba vtedy, keď používateľ otvorí ponuku a hľadá inú položku.

Dá sa urobiť ako v Aplikácia Jawbone Hore: vedľa tlačidla sa zobrazí ikona, ktorá odráža podstatu upozornenia bočné menu.

Tento prístup nie je vhodný, pretože zahŕňa vytváranie Vysoké číslošpeciálne ikony a vy ako dizajnér niekedy musíte použiť štandardné ikony ktoré majú menší význam.

A tu je opačný príklad, lišta kariet Twitter, ktorá používateľovi zobrazuje kontext upozornenia a umožňuje mu prejsť priamo na príslušnú obrazovku.

Uvedomenie si problému

Môže sa zdať, že vy povinný toto všetko robíme, aby sme ušetrili viac priestoru na obrazovke, ale často nechápeme, čo ľudia v skutočnosti vidia. Možno sa vám zdá, že ľudia vidia všetko, čo majú pred očami, ale v skutočnosti máme všetci nejakú zónu koncentrácie, aj keď je veľkosť obrazovky minimálna ().

Preto možno otázku úspory miesta na obrazovke vyriešiť bez kompromisov v navigácii - a v súlade s základné princípy HCI (Human Computer Interaction), ktoré od nás vyžadujú poskytnutie spätná väzba a zobrazenie stavu aplikácie.

Poznámka: Možno si budete musieť oprášiť svoje chápanie princípov HCI – som si istý, že vám to pomôže vyhnúť sa mnohým chybám v dizajne, ktoré robia ľudia s prístupom k vizuálnemu dizajnu.

Riešenie

Veľa sme o probléme hovorili, no riešenie stále nie je jasné.

Kedy môžete využiť hamburgerové menu?

V niektorých veľmi zriedkavých prípadoch je tento vzor skutočne opodstatnený, ale vo všeobecnosti by sa mu malo vyhnúť.

IRCCloud je príkladom (trochu) oprávneného použitia tlačidla hamburger: slúži na navigáciu medzi kanálmi a členmi kanála.

To je prijateľné, pretože hlavná obrazovka nemá žiadne podradené obrazovky, ktoré vyžadujú hierarchickú navigáciu; všetok obsah je prezentovaný v modálnej forme.

Ale aj v tomto prípade je zrejmé, že rozhranie je preťažené a informačnú architektúru je potrebné revidovať.

Bočná ponuka, ktorá zobrazuje členov kanála (vpravo), nahrádza tlačidlo akcie, ktoré môže skryť všetky akcie súvisiace s kanálmi. Namiesto toho museli dizajnéri zmiešať všetky možné akcie (súvisiace s kanálmi, sieťou a účtom) do jednej ponuky akcií:

To nás privádza k ďalšej časti článku:

Ako nahradiť tlačidlo na hamburger?

Vzor bočného menu znamená zlé informačnej architektúry: Tlačidlo na hamburger je ďalším prvkom rozhrania, ktorý nezobrazuje žiadnu postupnosť akcií - kým ho ľudia nepoužijú.

„Riešenie - aktualizácia informačnej architektúry“.

Vyššie uvedené obrázky sú príkladom toho, ako sa vyhnúť bočnému menu. Farebné bodky vám pomôžu sledovať, ako boli prvky rozhrania reorganizované.

Závery:

1. Stav sa zobrazuje na karte Správy
2. Prvky rozhrania sú vždy viditeľné a prístupné
3. Žiadny konflikt medzi navigačnými gestami

Okrem riešenia základných problémov môžeme získať vertikálny priestor skrytím navigačnej lišty aplikácie pri posúvaní nadol (pozri nižšie). Facebook príklad, ale to sa používa aj v Safari). Panel kariet zostáva na svojom mieste, čo nám umožňuje navigovať, aj keď je navigačný panel aplikácie skrytý.

Ak máte minimalistickú náladu, môže vám stačiť panel s nástrojmi. Cieľom je zviditeľniť navigáciu, poskytnúť priamy prístup k funkciám, vyhnúť sa konfliktom medzi navigačnými gestami a zobraziť upozornenia na ikony, na ktoré odkazujú.

[Aktualizovať] V prípade webových stránok by ste mali prehodnotiť aj informačnú architektúru, no namiesto týchto vzorov iOS odporúčam zobraziť navigáciu v hornej časti, vo forme zoznamu: príklad . Ak je zrejmé, že ide o navigáciu na stránke, ľudia sa určite posunú nadol a okamžite uvidia všetky ostatné dostupné možnosti.

Okrem toho sa vraciame k téme webov na mobilné zariadenia: Nezabudnite odstrániť 300 ms oneskorenie poklepania pomocou týchto tipov alebo pomocou dotykových udalostí.

Ako sa to všetko škáluje?

Tu uvádzam príklady rozhraní iOS - najlepšie riešenie na nich je použitie panelu s kartami alebo nástrojmi.

Ale čo ak má panel kariet viac ako 5 položiek?

V takýchto situáciách prvá vec, ktorú musíte urobiť, je prehodnotiť informačnú architektúru aplikácie. Ak však stále musíte ísť nad rámec piatich kariet, zvyčajne sa používa táto metóda: posledná záložka poskytuje prístup k zoznamu zostávajúcich možností.

Táto implementácia naráža na ďalší problém: po rolovaní zostáva panel nástrojov v neurčitom stave. Začiatočníci skryjú panel po tom, čo používateľ vyberie jednu z akcií - orezať, otočiť atď. Neurčitý stav panelu je teda „vynulovaný“ a kedy znovuotvorenie zobrazí sa v pôvodnom stave.

Záver

Takže ste si prečítali článok o problémoch so vzormi bočného panela a ich riešení v systéme iOS, ktoré boli zabudované do systému od úplného začiatku.

Dúfam, že článok bol pre vás užitočný a zrozumiteľný. Ak máte nejaké pripomienky, napíšte mi.

Ikona hamburgerov je všade. Všade okolo nás. Vo webových aplikáciách, na mobilných a desktopových stránkach, v softvér. Táto všadeprítomná trojriadková ikona je teraz taká bežná, že sa zdá, že je jedinečne spojená s navigačnou ponukou. Ale je to tak?

AT nedávne časy diskusie o účinnosti ikony hamburgerov dosiahli nové výšky. Články popredných dizajnérov a niekoľkých stránok vrátane The Atlantic, TechCrunch, The Next Web a Nielsen Norman Group dospeli k záveru, že ide o anti-vzor UX, trendovú a ľahko implementovateľnú ikonu, ktorá je regresom od jednoduchších a výraznejších alternatív. . Ale anti-pattern alebo nie, používanie ikony sa rozrástlo natoľko, že je takmer stálicou na väčšine webových stránok, najmä na menších obrazovkách.

Vzhľadom na moju pozíciu dizajnéra v tíme m.booking.com a naše používanie tejto ikony na zobrazenie vysúvacej ponuky som sa rozhodol tento objekt preskúmať. A začal som štúdiom pôvodu odznaku, aby som sa pokúsil pochopiť jeho cestu k hanbe.

To znie sľubne. Ale aj keď je ikona klasická a existuje odjakživa, weboví dizajnéri ju používajú menej dôsledne. Ikona sa použila na zoznamy, pretiahnutie a zmenu poradia, zarovnanie a ďalšie. Možno toto nesprávne použitie vysvetľuje jeho kritiku ako ikonu ponuky. Možno táto ikona pre svoju širokú distribúciu a rôznorodé využitie stratila schopnosť sprostredkovať jedinú metaforu a následne mätie používateľov.

Celý tento príbeh ma prinútil klásť otázky: „Mýlime sa a všetci ostatní majú pravdu? Spôsobuje to našim používateľom nepríjemnosti? Existujú ľudia, ktorí skutočne chápu, čo sú tieto tri malé riadky na našej stránke?

Pravidelní čitatelia tohto blogu nebudú prekvapení, keď zistia, že náš ďalši krok bolo položiť tieto otázky formou A/B testu. Ako všetko ostatné, aj ikona hamburgeru bola vystavená mnohým našim klientom, ktorí prostredníctvom interakcie s menu museli určiť, či je táto ikona najlepším riešením. Dovtedy som prečítal dostatok článkov a informačných údajov, aby som si bol istý, že nedostatok konsenzu alebo iných výsledkov nie je spôsobený správaním kupujúcich, pre ktorých bol dizajn vyvíjaný. Rozhodol som sa postupovať podľa opísanej metódy James Foster, na ktorý sa mnohí odvolávajú, vrátane jedného z našich najlepších mobilných špecialistov – Luke Wroblewski.

Predtým sme testovali niekoľko umiestnení ikon a štýlov (ohraničené, neohraničené, ikonické, rôzne farby atď.), ale nikdy sme netestovali slovo „Menu“ kvôli zložitosti našej túžby testovať v 41 jazykoch, ktoré podporujeme. Pohli sme sa však vpred tým, že sme našli preklady s pomocou nášho tímu jazykových expertov a spustili test:

Naša pôvodná ikona ponuky hamburgerov sa nachádza naľavo od názvu a s bielym oddeľovacím pruhom napravo.

Slovo „Menu“ vnútri bloku s bielym okrajom zaoblené rohy, je tiež zarovnaný doľava.

Spustili sme experiment pre celú našu používateľskú základňu. A tiež vzhľadom na slávu a všadeprítomnosť tohto prvku užívateľské rozhranie, dúfajúc, že ​​testovanie našich miliónov zákazníkov po celom svete nebude trvať dlho, a to vo všetkých podporovaných jazykoch a veľké čísla zariadení.

Aký je teda konečný výsledok? Zvíťazilo slovo nad rýchlym občerstvením, ako sa to podarilo v experimente Jamesa Fostera, alebo vyhrá žemľa s rezňom?

výsledky

Počas tohto experimentu nemalo nahradenie ikony slovom „Menu“ významný vplyv na správanie našich používateľov. S pomocou našej obrovskej používateľskej základne môžeme s veľmi vysokou pravdepodobnosťou konštatovať, že najmä pre návštevníkov Booking.com plní ikona hamburgeru svoju úlohu rovnako ako verzia s textovým popisom.

Tieto údaje samozrejme nemôžeme extrapolovať na všetko. V niektorých krajinách, v niektorých jazykoch alebo zariadeniach to mohlo fungovať lepšie alebo horšie. V globálnom meradle však môžeme konštatovať, že „hamburger“ bol príliš zosmiešňovaný. Celkovo to bolo tak rozpoznateľné ako slovo „Menu“. V duchu riadenia propagácie dizajnu by sme pravdepodobne mali zvážiť iné možnosti a možno skúsiť pridať syr, plátok slaniny a hranolky k našej ikone hamburgerov, ale zatiaľ s radosťou oznamujeme, že náš „trojradový priateľ“ je všade lepkavé. Jeho skutočné umiestnenie, tvar, veľkosť, poloha a farba sú samozrejme predmetom budúcich testov.

Nepochybne je to pre nás všetkých poučenie o podstate A/B testovania. Nikdy netestujete prvky používateľského rozhrania, model ani funkciu ako celok. Tieto veci testujete na veľmi špecifickej používateľskej základni v špecifických a špecifických scenároch. To, čo funguje pre Booking.com, nemusí fungovať pre vás alebo vašich používateľov. To je jeden z dôvodov, prečo sme urobili naše A/B testovanie. Závery iných expertov, údaje z iných stránok či hypotézy vymyslené v krčme pri jedení hamburgeru budú neoverené, kým nebudú testované na našich klientoch a na našej platforme.

Nenechajte sa zmiasť našou vlastnou metaforou, ale je to ako recept na dobrý hamburger. Aj keby ste mi presne napísali všetky ingrediencie, skončíte s úplne iným hamburgerom. To, samozrejme, ovplyvní kvalita mäsa dostupného na trhu, múka používaná na chlieb a tisíc ďalších faktorov. Pre nás osobne je nápad dobrý, ak je dobrý pre Booking.com. Či to dokážeme replikovať na našej stránke a či to bude fungovať u všetkých našich klientov.

Náš názor

Vždy by ste mali otestovať svoje nápady a zistiť, čo vám údaje hovoria a aké otázky sa vynárajú. Moja rada? Zahryznite sa a uvidíte, čo sa stane.

V ktorom navrhol päť alternatív k menu „hamburger“ na organizáciu navigácie v mobilnej aplikácii.

“Ak pracujete na digitálnych produktoch, pravdepodobne ste čítali desiatky článkov o tom, ako a prečo je hamburgerové menu zlé. používateľskú skúsenosť na mobilných zariadeniach pre jeho nezrozumiteľnosť a neefektívnosť. Viac a viac viac projektov experimentovanie s alternatívne možnosti prezentácia menu,“ píše Zoltan Kollin.

Dizajnér poznamenáva, že žiadna z alternatív uvedených v materiáli nie je zjavne pohodlnejšia a efektívnejšia ako ostatné – všetky sú vhodné pre rôzne situácie.

1. Záložky

Ako zdôrazňuje Colleen, karty môžu byť pohodlné riešenie, ak má mobilná aplikácia niekoľko hlavných sekcií a používatelia musia mať možnosť medzi týmito sekciami rýchlo prepínať.

Vývojári si často myslia, pokračuje Collin, že karty sú jedným z najjednoduchších navigačných vzorov. Pri vytváraní takéhoto menu by ste však mali dodržiavať niekoľko pravidiel:

• Sekcie by nemali byť viac ako päť.
• Jedna z kariet (aktívna) by mala byť vizuálne zvýraznená.
• Prvá karta by mala byť „domov“. Karty by mali byť uprednostnené alebo v poradí, v akom sa majú používať.
• Karty môžu byť umiestnené v hornej alebo dolnej časti obrazovky v závislosti od kontextu a platformy.
• Na označenie kariet použite namiesto štítkov ikony iba vtedy, ak používateľ presne pozná význam každej ikony a ak je oboznámený s možné akcie(sú vhodné napríklad pre aplikácie sociálnych sietí).

2. Karty s možnosťou „Iné“.

Ak má vaša aplikácia viac ako päť hlavných sekcií, Collin navrhuje použiť upravenú verziu prvého typu ponuky – karty s možnosťou „Iné“. V tomto prípade bude vývojár môcť umiestniť štyri sekcie s najvyššou prioritou na panel a zvyšok skryť na ďalšej karte.

„Nezdá sa to ako lepšia možnosť ako hamburgerové menu, ale ak si vyberiete karty tak, že takmer všetky informácie, ktoré používateľ potrebuje, sú v prvých štyroch sekciách, UX len ťažko utrpí,“ vysvetľuje Collin.

3. Rozbaľovacia ponuka

Variácia kariet so sekciou "Iné" - ponuka, ktorá sa prispôsobuje veľkosti obrazovky a zobrazuje rôzne množstvo karty pri každom rozlíšení. Karty, ktoré sa nezmestia na obrazovku, sú v časti „Iné“.

4. Rolovacie menu

„Ak máte niekoľko sekcií a nie je možné z nich vybrať tie hlavné, použite karty s doplnkový oddiel nemusí byť efektívnym riešením. Potom môžete vypísať zoznam všetkých položiek v ponuke a urobiť panel posúvateľným,“ píše Collin.

Dizajnér poznamenáva, že nevýhodou tohto riešenia je, že používateľ na začiatku stále vidí iba niektoré karty a na zobrazenie zvyšku je potrebné listovať v ponuke. Ak sa však používatelia nachádzajú v aplikácii internetového obchodu, ktorá uvádza kategórie produktov v lište, alebo v aplikácii správ s kartami kategórií, nebude to problém.

Ako už bolo povedané, dizajnéri by sa mali uistiť, že používateľom je jasné, ako používať posúvanie – a nastaviť vizuálne podnety. Napríklad aplikujte efekt miznutia na posledný prvok.

5. Rozbaľovacia ponuka

Podľa dizajnéra existuje zaujímavý, no nie najbežnejší vzor, ​​ktorý sa používa, keď nie je podstatná viditeľnosť a dostupnosť sekcií - rozbaľovacia ponuka.

Jednoduchá, funkčná, intuitívna a zapamätateľná, ako každá dopravná značka, ikona hamburgeru sa stala skutočným trendom posledného roka a neoddeliteľnou súčasťou každého moderného dizajnu webových stránok a mobilných aplikácií.

Táto jednoduchá ikona napodobňuje vzhľad zoznam ponúk, ideálny pre zariadenia s malé obrazovky a webové stránky, kde je dôležitá vizuálna stránka a navigácia by mala stáť bokom. Ide o vysoko efektívne a životaschopné riešenie, ktoré spĺňa požiadavky dnešného sveta.

Ako každý iný prvok rozhrania, aj ikona hamburgera môže mať určité odchýlky od pôvodnej verzie na základe potrieb každého jednotlivého projektu.

V závislosti od projektu a témy môže ikona hamburgeru trvať rôzne formy, ktoré dopĺňajú dizajn alebo sa môžu stať jeho samostatným, výrazným znakom.

Dnešná kolekcia obsahuje 20 rôznych variácií ikony hamburgeru.

Táto ikona hamburgerov, ktorú navrhol Dave Games, v sebe okamžite nabaľuje veľa hrejivej energie. Kreslený štýl dodáva hravosť a vytvára len tie najpozitívnejšie emócie. Takúto ikonu môžete pokojne použiť na väčšine moderných ilustrovaných rozhraní.

Túto ikonu morských vĺn navrhol Mat Walker. Skvele sa bude cítiť na rôznych projektoch venovaných moru. Modrá ako hlavná farba a okraj okolo nej robia tento odznak exkluzívnym.

Čistá, jasná a vtipná implementácia umožní tomuto dizajnu fungovať ako ikona menu na kulinárskych stránkach. V tomto prípade získa rozhranie pekný umelecký nádych.

Dizajnér ponúka 10 zaujímavých verzií hamburgerových odznakov, ktoré sú vyrobené s dušou. Obaly série rôzne druhy hamburgery: jeden so syrom, jeden so slaninou, jeden s morčacím mäsom a mnoho ďalších. Ak máte webovú stránku resp mobilná aplikácia venovaný reštaurácii rýchle občerstvenie určite prídu vhod. Sú tak vizuálne zaujímavé, že si nájdu miesto takmer v každej téme.

A tento projekt predstavuje realistický hamburger vo vektore. Zatvárací gombík je v tomto prípade vyrobený vo forme hranolčekov v tvare „X“, s omáčkou alebo bez nej. Ide o kreatívne riešenie, ktoré môže dizajnu stránky dodať exotiku.

Oficiálna stránka Star Wars obsahuje zaujímavú rotujúcu ikonu hamburgeru. Každý riadok je rozdelený na dve časti, aby sa získal vektor odrazu svetla laserové meče. Riešenie umocňuje celkový dojem zo stránky a posilňuje značku.

Burger Menu od Petra Twauriho je krásne ilustrovaná verzia ikony. Kľúčové vlastnosti tejto ikony je výber farieb, ktoré imitujú krájanú žemľu a mäsovú karbonátku.

Séria má rôzne možnosti hamburgery, ktoré sú realizované líniovým štýlom. Nájdete tu dvojitý hamburger, hamburger so syrom a šalátom, otvorený sendvič a niektoré ďalšie. Nájsť perfektné riešenie pre vaše čisté, ploché rozhranie bude len pridať korenie a "chuť".

Umelec predvádza tri zábavné verzie tlačidla: klasický hamburger, cheeseburger a hot dog. Každý je založený na jednej alebo dvoch farbách, vďaka čomu je vhodný pre rôzne drobné rozhrania. Tu farba vytvára správny druh sendviča.

Umelec ponúka malú animáciu, ktorá obsahuje iba jednu ikonu ponuky a niekoľko plynulých prechodov, ktoré sprevádzajú transformáciu na bežné „X“ (tlačidlo zatvorenia). Existujú špeciálne efekty, ktoré sa vyskytujú, keď umiestnite kurzor myši alebo kliknete.

Na rozdiel od väčšiny vyššie uvedených príkladov táto vzorka ukazuje skôr zručnú manipuláciu s hmotnosťou než s farbou. Horná a spodná línia sú výraznejšie ako stredná a vytvárajú ten správny „hamburgerový“ vzhľad. Umelec sa s úlohou úspešne vyrovnal.

Animácia ponuky ikony ninja od Andrewa Kovardakova sa líši od väčšiny tlačidiel na hamburgery a ponúka zaujímavé a neobvyklé riešenie s tajomným a atraktívnym podtextom. Tu je každý riadok ninja vo vektore.

A táto ikona je ilustráciou burgeru so šalátom a syrom. Môže pridať korenie do akéhokoľvek nudného rozhrania. Skvelé riešenie pre webovú stránku reštaurácie alebo kaviarne.

Toto je článok, kde nájdete zaujímavé diskusie o trendovej ikone menu. Je označený obrázkom, ktorý zobrazuje tri varianty gombíka na hamburger. Prvá je prémiová plochá ilustrácia, druhá je kolorovaná trojriadková ikona a tretia je monochromatická verzia druhej - je to najviac populárna voľba medzi dizajnérmi.

gif ukazuje plynulé prechody medzi počiatočným stavom tejto minimalistickej a elegantnej ikony a jej konečným stavom. Pretože animácia začína s spodná čiara, je kratšia ako ostatné.

Hamburgerové menu od Liama ​​Spradlina vyzerá ako sada školských záložiek. Táto implementácia je odvážna a trochu drsná. Takáto ikona je okamžite viditeľná, môže však byť ťažké nájsť pre ňu správne prostredie.

Doteraz sme sa na ikony pozerali izolovane, no skvele fungujú so slovami, najmä ak ide o slovo „Menu“. Aj keď sa to môže zdať prehnané, vyzerajú spolu sofistikovane. 1px široké ultratenké čiary, ktoré sú v tomto prípade použité, do seba zapadajú ako kúsky puzzle.

Projekt dokazuje, že ikona hamburgera môže vyzerať jasnejšie a atraktívnejšie, keď je zarámovaná. to skvelá voľba pre malé zariadenia, kde by sa takáto ikona hodila na dotykovú navigáciu.

Dizajnér zobrazuje jednoduchú, hladkú trojriadkovú ikonu, ktorá prechádza rôznymi metamorfózami a mení sa na kríž alebo šíp. Animácia obsahuje niekoľko riešení, ktoré môžu byť užitočné pre akýkoľvek projekt.

Výsledky

Na prvý pohľad sa môže zdať, že takej maličkosti, akou je ikona menu, netreba venovať veľkú pozornosť. Ale ak ukážete trochu fantázie, môžete ju premeniť na akýsi vrchol vášho rozhrania. Najmä ak sa vývojári začnú hrať s jeho významom a používaním umeleckých techník aby to bolo netradičnejšie a pútavejšie.