Meniul
AcasăYandex

Pictograma Hamburger: noi moduri de utilizare. De ce ar trebui să evitați meniurile cu hamburgeri și cum să o faceți

Până acum am făcut doar layout-ul.

5. Descărcați biblioteca jquery-3.3.1.min.js

Ne conectăm la documentul nostru HTML înainte de a închide eticheta corporală două fișiere, unul dintre ele este încă gol.



6. Creați un eveniment în JS

Scriem următorul cod în fișierul script.js

$(funcție())(
$(".menuBurger").on("click", function())(
$(".menu").slideToggle(200, function())(
if($(acest).css(„afișare”) === „niciunul”)(
$(this).removeAttr("stil");
}
});
});
});

Nu vom analiza codul JS în detaliu; ne vom limita la comentarii generale. Il pot recomanda celor care sunt interesati de programare in JS

Această linie $(".menuBurger").on("click", function())( monitorizează evenimentul clic pe un element cu clasa .menuBurger .

$(".menu").slideToggle(200, function())( aici funcția slideToggle() este aplicată meniului în sine, care extinde sau restrânge alternativ elementele selectate de pe pagină în 200 de milisecunde.

$(this).removeAttr("stil"); - elimină afișarea: niciuna din stilurile inline;

Acum, când faceți clic pe hamburger, meniul se extinde și se prăbușește, dar există o problemă: atunci când este extins, meniul mută conținutul principal al site-ului în jos, dar este corect dacă este deasupra conținutului. În același timp, viteza de încărcare a paginii are de suferit, mai ales pe internetul mobil.

6. Extinderea meniului în partea de sus a conținutului

Această problemă este rezolvată folosind poziționarea meniului.

În codul CSS principal trebuie să adăugați

Meniul (
poziție: relativă;
}

În interogarea media: .menu (
fundal: #eee;
poziție: absolută;
}

După aceasta, meniul de hamburger se va extinde în partea de sus a conținutului principal. Așa ar trebui să fie.

Meniul de hamburger în CSS

1. Dezactivați și ștergeți toate scripturile

2. Introduceți o linie de cod în fișierul HTML între etichetele div și ul

3. Înlocuiți etichetă div cu clasa .menuBurger pe etichetă

4. Conectați intrarea ID la atributul for label prin #menuCSS

Ca rezultat, când faceți clic pe pictograma hamburger de meniu, în caseta de selectare apare o bifă.

5. Adăugați pseudoclasa bifată la interogarea media

#menuCSS:verificat (
afișaj: niciunul;
}

Aceasta înseamnă că atunci când dați clic pe pictogramă, în caseta de selectare este plasată o bifare, dar este ascunsă pe ecran, doar pictograma este vizibilă. Ideea este că dacă caseta de selectare nu este bifată, atunci meniul este închis, iar dacă este bifat, atunci meniul este extins. Evenimentul cu deschiderea și închiderea meniului depinde de starea casetei de selectare.

6. Ascundeți intrarea în CSS

#menuCSS (
afișaj: niciunul;
}

7. Schimbați codul de la punctul 5, vedeți mai sus în articol pentru următoarele

#menuCSS:bifat + .menu (
afisare: bloc;
}

Dacă legătură de legăturăîntre etichetă și intrare #menuCSS este bifat (bifat), apoi meniul este extins. Asta e toată magia, pentru care funcționează meniul de hamburgeri CSS purși dacă îi adăugați o animație netedă, atunci nu veți simți nicio diferență față de un meniu JS.

Încercați să micșorați browserul și veți vedea clar cum funcționează meniul CSS hamburger

Concluzie

Ambele variante funcționează. Meniul din JS, să spunem, este corect din punctul de vedere al utilizării codului. Un meniu în CSS este o „cârjă”, un fel de „manifestare a ingeniozității”, potrivită pentru cei care nu vor să înțeleagă JS și urmează să-l folosească doar în proiectele lor. Pentru site-urile web personalizate, nu există „cârje”; recomand cu tărie realizarea de layout-uri adaptate pentru utilizarea ulterioară a JS de către alți specialiști.

De la Vitaly Rubtsov, nu am putut rezista dorinței de a realiza acest lucru.

În acest tutorial vă voi arăta cum să faceți acest lucru folosind doar CSS, fără niciunul folosind JavaScript. Așa că vom vedea câteva trucuri CSS (și SCSS) care ne vor permite să realizăm aproape același lucru animație lină, ca acest gif animat.

Iată un exemplu de ceea ce vom face:

Marcare

Sa incepem cu Structuri HTML, pe care o vom folosi. Vezi comentariile pentru o mai bună înțelegere.

Control Poveste Statistici Setări

Pornirea stilurilor SCSS

Acum să adăugăm câteva stiluri de bază pentru a obține ceea ce ne dorim aspect. Codul este destul de simplu.

/* Stiluri de bază */ * ( dimensiunea casetei: border-box; ) html, body ( margin: 0; ) body ( font-family: sans-serif; background-color: #F6C390; ) a ( text-decoration: niciunul; ) .container (poziție: relativă; margine: 35px automat 0; lățime: 300px; înălțime: 534px; culoare de fundal: #533557; overflow: ascuns; )

Funcționarea comutatorului

Înainte de a începe să creăm restul interfeței, vom adăuga câteva funcționalități de comutare pentru a trece cu ușurință de la o stare la alta.

HTML-ul de care avem nevoie este deja acolo. Și stilul care o face să funcționeze este cam așa:

// Ascunde caseta de selectare #toggle ( display: none; ) // Stiluri pentru starea „deschisă” atunci când caseta de selectare este selectată #toggle:checked ( // Orice element al cărui stil trebuie să-l schimbați la deschiderea meniului merge aici cu un selector ~ // Deschiderea stilurilor meniu de navigatie, de exemplu & ~ .nav ( ) )

Crearea unei stări închise

Pentru a face starea închisă, trebuie să convertim elementele de meniu în linii pentru a obține o pictogramă hamburger. Există mai multe modalități de a realiza această transformare. Am decis să procedăm astfel:

Și iată codul care implementează acest lucru.

$tranzitie-durata: 0,5s; // Afișează elementele de navigare ca linii care alcătuiesc pictograma hamburger.nav-item ( poziție: relativă; afișare: bloc inline; float: stânga; clar: ambele; culoare: transparent; dimensiunea fontului: 14px; spațiere între litere: - 6.2px; înălțime: 7px; line-height: 7px; text-transform: majuscule; spațiu alb: nowrap; transform: scaleY(0.2); tranziție: $tranziție-durată, opacitate 1s; // Adăugați lățime pentru primul line & :nth-child(1) ( spațiere între litere: -8px; ) // Adăugarea lățimii pentru a doua linie &:nth-child(2) ( spațiere între litere: -7px; ) // Setări pentru elemente care încep de la al patrulea & :nth-child (n + 4) ( spațiere între litere: -8px; margin-top: -7px; opacitate: 0; ) // Obțineți linii pentru pictograma hamburger &:before (poziția: absolut; conținut: ""; sus: 50%; stânga: 0; lățime: 100%; înălțime: 2px; culoare de fundal: #EC7263; transformare: translateY(-50%) scaleY(5); tranziție: $tranziție-durată; ) )

Vă rugăm să rețineți că aici am inclus doar stilurile de bază pentru elementele de navigare care sunt cele mai importante. Puteți găsi codul complet pe Github.

Creați un meniu deschis

A crea meniu deschis, trebuie să restabilim punctele de navigare de la linii la cele obișnuite link-uri text, și, de asemenea, face o serie modificări minore. Să vedem cum se face asta:

$tranzitie-durata: 0,5s; #toggle:verificat ( // Deschide & ~ .nav ( // Restaurează elementele de navigare din „linii” din meniu pictograma.nav-item (culoare: #EC7263; spațiere între litere: 0; înălțime: 40px; linie- înălțime: 40px ; margin-top: 0; opacitate: 1; transformare: scaleY(1); tranziție: $tranziție-durată, opacitate 0,1 s; // Ascunde liniile &:before ( opacitate: 0; ) ) ) )

Magia este în lucrurile mărunte

Dacă aruncăm o privire mai atentă la gif, vedem că toate elementele de meniu nu sunt mutate în același timp, ci într-un model de șah. Putem face acest lucru și în CSS! Practic, trebuie să selectăm fiecare element (folosind :nth-child ) și să setăm valoarea întârzierii tranziției să crească treptat. Aceasta este cu siguranță o muncă repetitivă. Dacă avem mai multe elemente? Nu vă faceți griji, putem face totul mai bine folosind puțină magie SCSS:

$articole: 4; $tranziție-întârziere: 0.05s; .nav-item ( // Setați întârzierea pentru elementele de navigare la închiderea @for $i de la 1 la $items ( &:nth-child(#($i)) ( $delay: ($i - 1) * $transition - întârziere; întârziere de tranziție: $întârziere; &:înainte (întârziere de tranziție: $întârziere; ) ) ) )

Rețineți că cu acest cod vom obține comportamentul pas dorit pentru animația de închidere. Trebuie să calculăm $delay , ușor diferit pentru animația de deschidere, pentru a recupera tranziția pasului. Ca aceasta:

$întârziere: ($articole - $i) * $întârziere-tranziție;

Concluzie

Am terminat cu meniul nostru chic! Am inclus, de asemenea, câteva articole false, ca în gif animatși poți vedea.

Așa că am creat un simplu și meniul de funcții numai în CSS. Cu toate acestea, dacă nu doriți să utilizați sistemul de comutare CSS, acesta poate fi înlocuit perfect cu câteva șiruri JavaScript fără prea mult efort.

Sperăm că ți-a plăcut acest tutorial și l-ai găsit util!

Probabil te-ai săturat deja să citești articole și să asculți constant diverse discuții despre trei linii scurte meniu de hamburger. Este aceasta o tehnică proastă de proiectare a UI? Sau nu rău? Această postare este diferită - nu va judeca dacă acest meniu este bun sau rău. Ideea este că nu cred că este cea mai bună decizie de design, într-un fel sau altul. Dar meniul de hamburgeri are și al său punctele forte, mai ales atunci când este folosit în designul mobil, în condiții spatiu limitat. Deci ce putem face? Doar să accepți meniul de hamburger așa cum este, în ciuda tuturor neajunsurilor, și să mergi mai departe cu viața ta? O mulțime de site-uri și aplicații par să se fi împăcat cu asta. Și cred că sunt capabil de ce e mai bun.

Și apoi s-au întâmplat două lucruri care m-au făcut să mă răzgândesc. În primul rând, am dat peste. Acesta este un articol care vă ajută cu adevărat să înțelegeți implicațiile utilizării unui meniu de hamburger. În special, site-urile cu astfel de meniuri suferă o scădere serioasă a implicării utilizatorilor. O revizuire a unor astfel de statistici tocmai a început să-mi schimbe părerea.

Următorul incident s-a întâmplat când vedeam un coleg care încerca să folosească o nouă aplicație web care avea doar un astfel de meniu. Acesta a fost un dezvoltator care era foarte familiarizat cu interfața meniului hamburger, dar când a venit să folosească aplicația pentru nevoile sale, a întrebat cu voce tare: „Cum ajung acolo?” Vă rugăm să rețineți că acesta este unul dintre cei mai deștepți oameni, asta știu, și nici nu s-a gândit să atingă pictograma meniului de hamburger. Dacă cineva atât de inteligent are probleme cu navigarea, ce spune asta despre utilizatorul obișnuit? Părerea mea a căpătat în sfârșit o bază solidă.

Găsirea unei soluții

Este suficient despre motivele neîncrederii mele în puterea meniului de hamburger - este timpul să vorbim despre soluție. În primul rând, m-am uitat la beneficiile specifice ale utilizării unui meniu de hamburger:

  • Scalabilitate: acesta este probabil principalul plus și Motivul principal, de ce atât de multe site-uri și aplicații îl aleg. Puteți încadra o mulțime de elemente de navigare în spatele unei pictograme mici.
  • Acuratețe: aceasta merge mână în mână cu scalabilitatea, dar tot nu este același lucru. Designerii doresc să creeze modele concise și îngrijite, lăsând suficient spațiu pentru conținutul principal. Utilizarea unui meniu de hamburger oferă un sentiment de simplitate vizuală care este atractiv pentru orice designer.

Și dacă e să creăm o alternativă la meniul de hamburger, aceasta trebuie să rezolve cumva problemele asociate cu acesta:

  • Înțeles: Elementele de navigare ar trebui să poată fi găsite cu ușurință, în special de către cei care folosesc produsul pentru prima dată.
  • Implicare: interfața ar trebui să ofere sugestii și feedback care să explice ce poate face utilizatorul cu produsul și când este adecvat să utilizeze anumite funcții.
Partea dificilă: mobil

Am decis să încep cu cel mai mult problema complexași verificați dacă soluția mea este potrivită pentru modele mobile. După ce m-am gândit la o mulțime de idei, am ajuns la concluzia că meniul barei de file iOS este una dintre cele mai bune soluții pentru interfețe mobile. Mulți oameni au încercat să facă bara de file derulabilă (pentru a se potrivi cu mai mult de cinci opțiuni) sau să adauge „mai multe” la navigare - ceva de genul Plyushkin, care are o cameră suplimentară care se va umple rapid cu vechituri. De asemenea, ambele aceste opțiuni încă nu îndeplinesc cerința principală - lipsește claritatea, vizibilitatea tuturor posibilităților. Deci, ce puteți face cu meniul file pentru a remedia acest lucru?

Soluția mea este să combin hamburgerul și bara de file într-o singură abordare. Rezultatul este o bară de file care deschide un set de opțiuni pentru fiecare element de meniu.

Am creat o aplicație de testare a productivității echipei pentru a ilustra abordarea mea în acțiune. Folosind această metodă, utilizatorul poate vedea clar principalele funcții și utilizări ale produsului. Și în loc să adormi lista plina elemente de meniu ascunse în spatele pictogramei hamburger, utilizatorului i se arată mai multe opțiuni care se referă la fila pe care a făcut clic. Acest lucru face navigarea mai ușor de înțeles și digerat, tot ceea ce aveți nevoie este întotdeauna la îndemână și permite utilizatorului să vadă ierarhia aplicației.

Un alt avantaj al acestui design este capacitatea de a utiliza notificări contextuale. În cazul unui meniu de hamburger, aveți un singur loc pentru a afișa aceste notificări. Dacă rămâneți cu un aspect al barei de file, puteți oferi indicii utilizatorului cu privire la oricare dintre elementele de meniu pe care le selectează.

Desigur, cel mai mare câștig al acestei abordări este scalabilitatea. Da, încă ești limitat la cinci categorii, dar asta e un lucru bun. Sincer, cred că orice site își poate încadra opțiunile în cinci categorii dacă designerul gândește cu înțelepciune navigarea. La urma urmei, în fiecare dintre aceste categorii pot exista încă cinci sau șase sub-articole.
În total, există 30 de opțiuni posibile de navigare fără senzația de supraîncărcare pentru utilizator și fără a ocupa întreg spațiul ecranului.

Aplicație pe tablete

Integrarea unei astfel de bare de file în tablete, deoarece părea ciudată. Tabletele sunt mult mai versatile, iar utilizarea aceleiași interfețe de utilizare ca și dispozitivele mobile arăta la fel de incomodă ca un adolescent în haine pe care le depășise de mult. Așa că am mers pe un alt traseu. În loc să plasez bara de file în partea de jos, am așezat-o în lateral. Acest lucru s-a dovedit a fi mai convenabil în ceea ce privește utilizarea spațiului pe ecran și părea foarte natural. În plus, mulți utilizatori țin tableta de o parte, așa că aceasta este zona țintă pentru atingerea cu degetul.

Ce zici de desktop?

Pregătește-te... meniu extras. Așa este – încearcă această abordare pe o interfață desktop și te vei confrunta cu o realitate de netăgăduit: această opțiune nu este deloc nouă. Meniurile glisante există de ani de zile și aproape oricine (chiar și mama ta) știe cum funcționează. Aceasta este frumusețea acestei abordări – nu este nimic nou.


Dezvăluirea completă

Nu știu cum să numesc chestia asta. Glisor incrustat? Sau TABurger (TAB „tab” + burger)? Mai mult, nu știu dacă cineva a creat o soluție similară înainte. Având în vedere simplitatea unui astfel de meniu, nu suport să cred că am fost primul. Știu că câteva aplicații folosesc meniuri glisante pe unele butoane de file (cum ar fi Tweetbot), dar de obicei sunt implementate astfel acces rapid la funcții pentru utilizatori avansați, și nu în scopul creșterii ierarhiei de navigare. Dacă aveți un astfel de exemplu, spuneți-mi în comentarii.
Nu contează dacă un astfel de meniu este nou sau a fost inventat de mult. Ceea ce contează este dacă este o soluție de navigare mai bună și mai creativă decât un meniu de hamburger. Nu-ți mai spune „Acest site grozav are acest meniu, deci trebuie să fie cel mai bun” sau „Toată lumea o face, așa că trebuie să fie corect”. Designul merită o abordare mai bună, mai atentă.
ACTUALIZĂRI
Collin Eberhardt a notat pe Twitter că aceeași interfață de utilizare este implementată în Windows Phone. M-am utilizator Windows Telefon și are dreptate. Deși acest tip de interacțiune este folosit în Windows Phone doar pentru opțiunea „mai mult” din bara de file.

James Perich a dat un alt exemplu pe Twitter. Aruncă o privire la AHTabBarController creat de Arthur Hemmer.

Veți avea mai greu să oferiți utilizatorului informații despre un anumit articol dacă acesta este vizibil doar atunci când utilizatorul deschide meniul în căutarea unui alt articol.

O poți face ca în aplicația Jawbone Up: arată o pictogramă care reflectă esența notificării lângă butonul meniul lateral.

Această abordare nu se scalează foarte bine deoarece implică crearea cantitate mare pictograme speciale, iar tu, ca designer, va trebui uneori să folosești icoane standard, care au mai puțină semnificație.

Iată exemplul opus: bara de file Twitter, care arată utilizatorului contextul notificării și îi permite utilizatorului să meargă direct la ecranul relevant.

Conștientizarea problemei

Poate părea că tu obligat făcând toate acestea pentru a economisi mai multe imobiliare pe ecran, dar adesea înțelegem greșit ceea ce văd oamenii de fapt. Vi se poate părea că oamenii văd tot ce se află în fața ochilor lor, dar în realitate toți avem o anumită zonă de concentrare, chiar dacă dimensiunea ecranului este minimă ().

Prin urmare, problema economisirii spațiului pe ecran poate fi rezolvată fără a compromite navigarea — și în conformitate cu principii de baza HCI (Human Computer Interaction) care ne solicită să furnizăm părereși afișarea stării aplicației.

Notă: poate fi necesar să vă perfecționați înțelegerea principiilor HCI — Sunt destul de sigur că acest lucru vă va ajuta să evitați multe greșeli de design pe care le fac oamenii cu o abordare vizuală a designului.

Soluţie

Am vorbit mult despre problemă, dar soluția nu este încă clară.

Când poți folosi meniul de hamburgeri?

În unele cazuri foarte rare, acest model este de fapt justificat, dar în general ar trebui evitat.

IRCCloud este un exemplu de utilizare justificată (într-o oarecare măsură) a butonului hamburger: este folosit pentru a naviga între canale și participanții la canal.

Acest lucru este acceptabil deoarece ecranul principal nu are niciun ecran copil care necesită navigare ierarhică; tot conținutul este prezentat într-o formă modală.

Dar chiar și în acest caz, este clar că interfața este supraîncărcată, iar arhitectura informațională necesită revizuire.

Meniul lateral care afișează membrii canalului (în dreapta) ia locul unui buton de acțiune, sub care ar putea fi ascunse toate acțiunile legate de canale. În schimb, designerii au trebuit să amestece totul acțiuni posibile(referitor la canale, rețea și cont) într-un singur meniu de acțiuni:

Acest lucru ne duce fără probleme la următoarea secțiune a articolului:

Cum se înlocuiește butonul pentru hamburger?

Modelul meniului lateral implică rău arhitectura informatiei: Un buton hamburger este un alt element de interfață care nu arată nicio secvență de acțiuni — până când oamenii îl folosesc.

„Soluția este actualizarea arhitecturii informaționale.”

Imaginile de mai sus sunt un exemplu despre cum puteți evita meniul lateral. Punctele colorate vă ajută să urmăriți modul în care au fost reorganizate elementele interfeței.

Concluzii:

  • Starea este prezentată în fila Mesaje
  • Elementele de interfață sunt întotdeauna vizibile și accesibile
  • Niciun conflict între gesturile de navigare

    • Pe lângă rezolvarea principalelor probleme, putem câștiga puțin spațiu vertical prin ascunderea barei de navigare a aplicației atunci când derulăm în jos (vezi mai jos). Exemplu de Facebook, dar aceasta este folosită și în Safari). Bara de file rămâne la locul său, permițându-ne să navigăm chiar și atunci când bara de navigare a aplicației este ascunsă.

    Dacă sunteți într-o dispoziție minimalistă, poate că o bară de instrumente va fi suficientă. Ideea este de a face navigarea vizibilă, de a oferi acces direct la funcții, de a evita conflictele între gesturile de navigare și de a afișa alerte pe pictogramele cărora le aparțin.

    [Actualizare] În cazul site-urilor web, ar trebui să reconsiderați și arhitectura informațională, dar în loc să folosiți aceste modele iOS, vă recomand să afișați navigarea în partea de sus, ca o listă: exemplu. Dacă este evident că aceasta este navigarea site-ului, oamenii vor derula cu siguranță mai departe și vor vedea imediat toate celelalte opțiuni disponibile.

    De asemenea, revenind la subiectul site-urilor web pe dispozitive mobile: Asigurați-vă că eliminați întârzierea de atingere de 300 ms folosind aceste sfaturi sau folosind evenimentele tactile.

    Cum se scalează toate acestea?

    O aduc aici Exemple iOS interfețe — cea mai bună soluție pe ele este utilizarea unui panou cu file sau instrumente.

    Dar dacă bara de file are mai mult de 5 elemente?

    În astfel de situații, primul lucru pe care trebuie să-l faceți este să reconsiderați arhitectura informațională a aplicației. Dar dacă tot trebuie să depășești cele cinci file, de obicei se folosește următoarea metodă: ultima filă oferă acces la o listă de opțiuni rămase.

    Această implementare se confruntă cu o altă problemă: după derulare, bara de instrumente rămâne într-o stare nedefinită. Rookie ascunde panoul după ce utilizatorul selectează una dintre acțiunile — decupați, rotiți etc. Astfel, starea nedefinită a panoului este „resetată”, iar la redeschidere este afișată în starea inițială.

    Concluzie

    Deci, ați citit un articol despre problemele cu modelul barei laterale și soluția lor în iOS, care au fost încorporate în sistem încă de la început.

    Sper că articolul v-a fost util și de înțeles. Daca aveti comentarii va rog sa-mi scrieti

    Pictograma hamburgerului este peste tot. Peste tot în jurul nostru. În aplicații web, pe site-uri mobile și desktop, în software. Această pictogramă omniprezentă cu trei linii este atât de comună în zilele noastre încât pare să fie asociată în mod unic cu meniul de navigare. Dar este?

    ÎN În ultima vreme discuțiile despre eficiența pictogramei hamburger au atins noi culmi. Articole ale designerilor proeminenți și mai multe site-uri, inclusiv The Atlantic, TechCrunch, The Next Web și Nielsen Norman Group, concluzionează că acesta este un anti-model UX, o pictogramă la modă și ușor de implementat, care este o regresie de la mai simplu, mai mult. alternative expresive... Dar anti-model sau nu, utilizarea pictogramei a crescut atât de mult încât este aproape un fix pe majoritatea site-urilor web, în ​​special pe ecranele mici.

    Având în vedere poziția mea de designer în echipa m.booking.com și utilizarea acestei pictograme pentru a afișa un meniu glisant, am decis să explorez acest obiect. Am început prin a studia originile icoanei pentru a încerca să înțeleg calea ei către infamie.

    Acest lucru sună promițător. Dar chiar dacă pictograma este un clasic și a existat pentru totdeauna, designerii web au fost mai puțin consecvenți în utilizarea sa. Pictograma a fost folosită pentru liste, glisare și reordonare, aliniere și multe altele. Poate că această utilizare greșită explică critica sa ca pictogramă de meniu. Poate datorită distribuției sale largi și utilizării variate, această pictogramă și-a pierdut capacitatea de a transmite o singură metaforă și, la rândul său, derutează utilizatorii.

    Toată această poveste m-a făcut să pun întrebări: „Ne înșelim cu adevărat și toți ceilalți au dreptate? Cauza acest lucru inconveniente utilizatorilor noștri? Există oameni care înțeleg cu adevărat care sunt acele trei rânduri mici de pe site-ul nostru?”

    Cititorii obișnuiți ai acestui blog nu vor fi surprinși să afle că noastre urmatorul pas a fost să pun aceste întrebări sub forma unui test A/B. Ca orice altceva, pictograma hamburger a fost supusă influenței numeroșilor noștri clienți care, prin interacțiunea cu meniul, au trebuit să stabilească dacă pictograma era cea mai bună soluție. Până atunci, citisem suficiente articole și informații pentru a fi încrezător că lipsa de consens sau rezultate diferite nu se datorau comportamentului clienților pentru care se dezvolta designul. Am decis să urmez metoda descrisă James Foster, care a fost menționat de mulți, inclusiv de unul dintre specialiștii noștri de top în mobil - Luke Wroblewski.

    Am testat anterior mai multe poziții și stiluri de pictograme (cu chenar, fără chenar, cu pictogramă, culori diferite etc.), dar nu am testat niciodată cuvântul „Meniu” din cauza complexității dorinței noastre de a testa în patruzeci de ani. o singură limbă, susținută de noi. Cu toate acestea, am continuat, am găsit traducerile cu ajutorul echipei noastre de experți lingvistici și am rulat testul:

    Pictograma noastră originală de meniu „hamburger” este în stânga titlului și cu o linie albă de separare în dreapta.

    Cuvântul „Meniu” în interiorul unui bloc cu un cadru alb cu colturi rotunjite, este, de asemenea, aliniat la stânga.

    Am lansat un experiment în întreaga noastră bază de utilizatori. Și, de asemenea, având în vedere popularitatea și ubicuitatea acestui element interfața cu utilizatorul, am sperat că nu va dura mult timp pentru a testa milioane de clienți din întreaga lume, în fiecare limbă acceptată și un numar mare dispozitive.

    Deci ce este rezultat final? Cuvântul a învins fast-food-ul, așa cum a făcut-o în experimentul lui James Foster, sau vor câștiga chifla și cotlet?

    Rezultate În acest experiment, înlocuirea pictogramei cu cuvântul „Meniu” nu a avut un impact semnificativ asupra comportamentului utilizatorilor noștri. Cu ajutorul nostru bază imensă utilizatori, putem afirma, cu un grad foarte mare de probabilitate, că, în special pentru vizitatorii Booking.com, pictograma hamburger își îndeplinește rolul în același mod ca și versiunea cu descriere text.

    Desigur, nu putem extrapola aceste date la toate. În unele țări, pe unele limbi sau dispozitive, este posibil să fi funcționat mai bine sau mai rău. Dar la scară globală, putem trage concluzia că „hamburgerul” a fost ridiculizat prea mult. În general, a fost la fel de recunoscut ca și cuvântul „Meniu”. În spiritul gestionării progresului în proiectare, probabil că ar trebui să luăm în considerare alte opțiuni și poate să încercăm să adăugăm brânză, o slănină și cartofi prăjiți la pictograma noastră de hamburger, dar deocamdată suntem bucuroși să raportăm că „prietenul nostru cu trei linii” este tencuit peste tot. Amplasarea, forma, dimensiunea, poziția și culoarea sa reală reprezintă, desigur, un subiect pentru teste viitoare.

    Cu siguranță aceasta este o lecție pentru noi toți despre natura testării A/B. Nu testați niciodată elementele UI, modelul sau funcția în ansamblu. Testați aceste lucruri într-un mod foarte specific public personalizatîn anumite scenarii specifice. Ceea ce funcționează pentru Booking.com poate să nu funcționeze pentru dvs. sau pentru utilizatorii dvs. Acesta este unul dintre motivele pentru care ne-am făcut testarea A/B. Constatările de la alți experți, datele de pe alte site-uri sau ipotezele formulate într-un pub în timp ce mănânci un burger, toate nu vor fi dovedite până când sunt testate cu clienții noștri și pe platforma noastră.

    Să nu ne pierdem în propria metaforă, dar este ca o rețetă pentru un hamburger bun. Chiar dacă ai notat toate ingredientele exact după mine, vei ajunge cu un cu totul alt hamburger. Acest lucru, desigur, va fi afectat de calitatea cărnii disponibile pe piață, de făina folosită pentru pâine și de mii de alți factori. Pentru noi personal, ideea este bună dacă este bună pentru Booking.com. Dacă îl putem repeta pe site-ul nostru, și dacă funcționează pentru toți clienții noștri.

    Opinia noastră Ar trebui să vă testați întotdeauna ideile și să vedeți ce vă spun datele și ce întrebări apar. Sfatul meu? Ia o mușcătură și vezi ce se întâmplă.