Navigare cu file: Când să o utilizați și cum să o optimizați

Unul dintre citatele mele preferate UX vine de la Chikezie Ejiasi, șeful Studioului și Sistemelor de Design la Google.

El a scris: „Viața este conversațională. Designul web ar trebui să fie la fel. Pe web, vorbești cu cineva pe care probabil nu ai întâlnit niciodată – așa că este important să fii clar și precis. Astfel, navigarea bine structurată și organizarea conținutului merg mână în mână cu o conversație bună.”

Navigarea cu file poate fi clară și precisă? Desigur că poate, ceea ce o face o formă validă de navigare și organizare a conținutului.

Ceea ce contează, ca și în majoritatea lucrurilor legate de UX, este modul în care îl implementați și cum îl optimizați.

Ce este navigarea cu file?

Navigarea cu file este un stil de navigare și UI în care informațiile sunt organizate în file, care separă conținutul în diferite secțiuni.

În general, când te uiți la navigarea cu file, vei observa câteva caracteristici comune:

1. Colțurile filelor rotunjite;
2. Separarea filelor, fie că este vorba de spațiu sau de o singură linie;
3. Efecte de hover pe file;
4. Gradient pentru a adăuga adâncime și dimensiune filelor.

Navigarea cu file se bazează pe metafora folderului, cu care ar trebui să fie familiarizată orice persoană care lucrează într-un birou sau se uită la televizor. La fel cum explică Mifsud de la UsabilityGeek...

Justin Mifsud, UsabilityGeek :

„În terminologia UI, metaforele sunt idei sau obiecte care sunt folosite pentru a facilita familiaritatea dintre utilizator și aplicație.

Utilizarea filelor în interfața de utilizare este o metaforă excelentă, deoarece arată ca divizoare de file din lumea reală în fișiere sau file pe foldere dintr-un sertar de fișiere.

Astfel, este mai intuitiv pentru utilizatori să știe că aceste file împart conținutul în secțiuni și, la fel ca în viața reală, atingând fila (emulata pe web făcând clic pe o filă) va afișa conținutul respectiv.” (prin UsabilityGeek)

Deoarece metafora este atât de comună, este important să fii atent la implementare. Navigațiile cu file au un prototip puternic, așa că trebuie să arate și să funcționeze exact așa cum sunt așteptate.

Ca orice sistem de navigare bun, filele vă permit să:

• Separați în mod semnificativ conținutul în diferite secțiuni;
• Arată-le oamenilor ce conținut le este disponibil și cum pot ajunge la acel conținut;
• Arată-le oamenilor, vizual, unde se află pe site-ul tău.

Când este o idee bună să folosiți navigarea cu file?

În general, este o idee bună să utilizați navigarea cu file atunci când...

• Aveți între două și nouă categorii diferite de conținut.
• Numele categoriilor sunt relativ scurte și previzibile, atât din punct de vedere al poziției, cât și al copiei (adică se potrivesc cu prototipul).
• Numărul de categorii este puțin probabil să se schimbe în mod regulat.
• Categoriile sunt de natură similară; are sens logic să fie puse împreună.
• Categoriile se încadrează într-un singur rând.

După cum explică Jakob Nielsen de la Nielsen Norman Group, atunci când navigarea cu file devine atât de complexă încât necesită mai multe rânduri, problemele încep să apară...

Jakob Nielsen, Nielsen Norman Group :

„Multe rânduri creează elemente de interfață de utilizare săritoare, care distrug memoria spațială și, astfel, fac imposibil ca utilizatorii să-și amintească ce file le-au vizitat deja.

De asemenea, mai multe rânduri sunt un simptom sigur al complexității excesive: dacă aveți nevoie de mai multe file decât pot încăpea într-un singur rând, trebuie să vă simplificați designul.” (prin NN/g)

Mai multe rânduri creează, de asemenea, probleme de ierarhie vizuală. Când există un al doilea rând, acesta poate semnala utilizatorului că filele din al doilea rând sunt subcategorii sau, cel puțin, mai puțin importante decât filele din primul rând.

În general, nu este o idee bună să utilizați navigarea cu file atunci când:

• Vrei ca oamenii să compare conținutul simultan. Acest lucru încordează memoria și crește substanțial încărcarea cognitivă.
• Te gândești să adaugi un link în stil „Mai mult...”.

Desigur, acestea sunt doar linii directoare de bază. Ai putea să te potrivești cu toate regulile „ar trebui să-l folosești” și să descoperi că nu funcționează pentru publicul tău. În cele din urmă, este ceva ce va trebui să-l testezi.

Amintiți-vă, puteți utiliza analiza digitală pentru a afla dacă navigarea cu file creează probleme vizitatorilor dvs. De acolo, puteți fie să faceți modificări pentru a remedia problemele, fie să experimentați cu un nou tip de navigare.

Controversa

În timp ce practicile moderne de design au o mulțime de site-uri care arată așa...

…unii oameni folosesc navigarea cu file ca navigare principală.

După cum a relatat Luke Wroblewski de la Google cu ani în urmă, Amazon a fost cu adevărat pionier în această tendință...

Luke Wroblewski, Google :

„În 1998, site-ul avea două categorii de nivel superior: cărți și muzică.

Pe măsură ce s-au adăugat categorii suplimentare (cum ar fi videoclipuri și cadouri), sistemul de file orizontale s-a scalat destul de bine și a creat o oportunitate frumoasă de diferențiere a categoriilor de produse prin culoare.” (prin LukeW)

Iată o privire asupra modului în care Amazon a folosit navigarea cu file în zilele anterioare...

Pe măsură ce site-ul a crescut în popularitate, la fel a crescut și numărul de file de care Amazon avea nevoie...

În 1999, Jakob a numit asta „un design prost și un abuz al metaforei filei”:

Susțin că filele ar fi mai bine folosite pentru a comuta între vizualizări alternative (dar legate) decât pentru a naviga către locații care nu au legătură.

Ar trebui să utilizați file pentru a alterna vizualizările în același context, nu pentru a naviga în zone diferite. Acesta este cel mai important punct, deoarece rămânerea pe loc în timp ce alternăm vederile este motivul pentru care avem file în primul rând

Jakob Nielsen

Totuși, multe site-uri au urmat exemplul Amazon și definiția navigării cu file a început să se schimbe de la „comutarea între vizualizări alternative” a lui Nielsen.

În timp ce utilizarea navigației cu file ca sistem de navigare principal a ieșit puțin demodat, poate funcționa. Ca și în cazul majorității lucrurilor, preocuparea ta principală nu ar trebui să fie ceea ce spune Nielsen despre navigarea cu file, ci ceea ce spune publicul tău.

Le este greu de folosit? Navigați pe site-ul dvs. corect? Pot găsi cele mai importante elemente ale site-ului dvs.? Efectuați teste de utilizare pentru a fi sigur.

Cum se implementează navigarea cu file

Air Canada, împreună cu majoritatea companiilor aeriene importante, utilizează bine navigarea cu file...

Când implementați singur navigarea cu file (la orice nivel), iată câteva lucruri de reținut:

• Mai întâi, proiectați arhitectura informațională (IA) a site-ului dvs., astfel încât să puteți lua decizii mai inteligente legate de file.
• Ar trebui să se poată face clic pe întreaga filă, nu doar pe numele categoriei (text).
• Nu utilizați o filă „acasă”, chiar dacă utilizați navigarea cu file pentru întregul site. În schimb, cereți sigla dvs. să ducă vizitatorii pe pagina de pornire.
• Fila ar trebui să fie conectată la zona de conținut pe care o controlează, astfel încât domeniul de aplicare al filei să fie clar.
• Numele categoriilor trebuie să aibă unul sau două cuvinte și să fie scrise în limba engleză simplă. Evitați să folosiți toate majusculele, deoarece îngreunează citirea filelor.
• Nu stivuiți mai multe rânduri de file. Dacă trebuie, utilizați în schimb subcategorii (adică o a doua bară orizontală sub file). Dacă folosiți subcategorii, asigurați-vă că există o conexiune vizuală între fila selectată și bara de subcategorii de mai jos. Asigurați-vă că cantitatea de subcategorii pe care o utilizați nu este copleșitoare; condensați și simplificați.
• Fila selectată ar trebui să fie marcată vizibil pentru a indica locația curentă. Cu toate acestea, filele neselectate nu ar trebui să fie atât de dezactivate încât să fie uitate sau trecute cu vederea.
• O ordine consecventă a filelor trebuie menținută de la o pagină la alta, astfel încât utilizatorul să înțeleagă pe deplin modul în care filele se leagă între ele.

Jakob explică de ce acest tip de consistență este important...

1. Recunoaștere. Când ceva arată întotdeauna la fel, știi ce să cauți și știi ce este atunci când îl găsești.

2. Previzibilitate. Când ceva funcționează întotdeauna la fel, știi ce se va întâmpla atunci când acționezi în consecință.

3. Împuternicirea. Când te poți baza pe cunoștințele tale anterioare cu privire la toate funcțiile disponibile, poți compune cu ușurință un set de acțiuni pentru a-ți atinge obiectivul.

4. Eficiență. Nu este nevoie să petreceți timp învățând ceva nou sau să vă faceți griji cu privire la efectul caracteristicilor inconsecvente.

Jakob Nielsen

Exemple de navigare cu file realizată corect

Cel mai bun mod de a înțelege navigarea cu file, mai ales că poate fi folosită în atât de multe moduri diferite, este să te uiți la câteva exemple.

1. Colecția de artă al albumului

Album Art Collection este un exemplu destul de popular de navigare cu file...

Două lucruri sunt interesante aici...

1. Navigarea este verticală, nu orizontală.
2. Navigarea include pictograme.

De obicei, veți găsi navigații cu file prezentate orizontal. Acest lucru se datorează parțial prototipurilor de design. Deoarece este obișnuit, oamenii tind să caute navigații în spațiul orizontal de sub logo.

Desigur, asta nu înseamnă că ești limitat să folosești acel spațiu pentru navigare. Doar asigurați-vă că utilizați testarea utilizatorului. Nu doriți să mutați navigarea din motive stilistice pentru a afecta ușurința de utilizare a site-ului dvs.

Rețineți că, deși Album Art Collection utilizează pictograme de navigare, acestea nu abandonează descrierile bazate pe text. Testarea de utilizare a pictogramelor este un articol propriu, dar, de cele mai multe ori, descrierile bazate pe text sunt mai utilizabile decât pictogramele singure. Jacob Gube de la Six Revisions explică...

Jacob Gube, șase revizuiri :

„Evitați să utilizați pictograme pentru a înlocui textul de control al filei, deoarece simbolurile pot însemna lucruri diferite pentru diferiți oameni – cel mai sigur pariu este utilizarea textului simplu pentru a descrie informațiile din panou.” (prin Smashing Magazine)

2. Aparatul de facturare

Aparatul de facturi este navigarea dvs. de bază cu file ca exemplu principal de navigare...

Cu toate acestea, acestea includ o filă „Acasă”, care este redundantă. Observați modul în care fila selectată este prezentată și filele sunt conectate la zona de conținut.

3. Tampon

Buffer a fost unul dintre exemplele mele preferate de navigare cu file. În trecut, aveau o ofertă pentru persoane fizice și o ofertă pentru companii, așa că folosesc file pentru a-și separa conținutul sub fold.

Aici a fost începutul conținutului pentru persoane fizice...

Și aici a fost începutul conținutului pentru afaceri...

Acest lucru le-a permis să vorbească cu două audiențe diferite fără a crea un site sau o experiență complet separată.

Mai târziu, pagina produsului Buffer a suferit modificări profunde, cu Publicare, Răspuns și Analizare printre alte oferte (toate destul de explicite). Iată navigarea în file pe care au folosit-o pentru paginile lor:

Pe lângă diferitele planuri de preț, aceste file bazate pe produse au afișat o altă mărturie, relevantă pentru produsul din filă:

După cum explică David Leggett de la UX Booth, navigarea cu file este relevantă dincolo de nivelurile primare și secundare de navigare. Ele pot fi folosite chiar și sub pliul, ca în cazul lui Buffer...

David Leggett, Standul UX :

„Filele nu trebuie să fie limitate la nivelurile primare și secundare de navigare. Dacă oferă unui utilizator posibilitatea de a răsfoi între zone ale aceluiași conținut, se pot dovedi destul de utile.

Combinată cu tehnologia care schimbă conținutul fără a reîncărca o pagină, poate insufla un sentiment tangibil utilizatorului final care navighează pe pagină.” (prin UX Booth)

3 bune practici de reținut

Înainte de a experimenta navigarea cu file sau de a decide că nu funcționează pentru dvs., luați în considerare acești trei factori: accesibilitate, fragmentare și viteză.

1. Accesibilitatea contează

Vrei ca site-ul tău să fie accesibil celor cu dizabilități sau limitări. Pentru a face asta cu navigarea cu file, va trebui să...

• Permiteți utilizatorilor să navigheze în file folosind tasta „Tab” de pe tastatură.
• Permiteți utilizatorilor să selecteze o filă folosind tasta „Enter” de pe tastatură.
• Indicați ce filă este selectată folosind o metodă alternativă. De exemplu, puteți include un atribut de titlu cu cuvântul „activ”.

A face site-ul dvs. mai ușor de utilizat pentru mai mulți oameni nu va afecta niciodată conversiile.

2. Îmbunătățirea contează

Cu navigarea cu file, modul în care decideți să vă organizați și să vă împărțiți conținutul este incredibil de important. De aceea, prima mea recomandare de implementare de mai sus a fost legată de arhitectura informațională a site-ului dvs.

Justin explică de ce organizarea corectă este vitală...

Justin Mifsud, UsabilityGeek :

„Filele împart conținutul în secțiuni semnificative care ocupă mai puțin spațiu pe ecran. În acest sens, utilizatorii pot accesa cu ușurință conținutul care îi interesează (în loc să aibă tot conținutul din paragrafe).” (prin UsabilityGeek)

Luați în considerare tot conținutul pe care l-ați dori pe site-ul dvs. Apoi, grupați acel conținut în patru până la cinci găleți. Probabil, veți putea repeta acest exercițiu și veți ajunge cu două sau trei găleți diferite. Asta e bine. Efectuați testarea utilizatorilor pentru a vedea la ce oameni răspund și navigarea cu mai bine.

Mai presus de toate, veți dori să vă asigurați...

1. Conținutul dvs. este împărțit într-un mod logic, așteptat și clar pentru vizitatori.
2. Ordinea filelor este semnificativă și logică.
3. Filele dvs. urmează prototipurile existente. De exemplu, site-urile SaaS sunt adesea împărțite într-un anumit mod, în timp ce site-urile de comerț electronic sunt adesea împărțite în altul.

3. Viteza contează

Am scris despre importanța vitezei în repetate rânduri. Deci, nu ar trebui să fie surprinzător faptul că viteza joacă un rol și în eficacitatea navigării cu file.

Jacob explică destul de bine...

Jacob Gube, șase revizuiri :

„Un scop al folosirii filelor de module este acela de a permite prezentarea rapidă și interactivă a conținutului. Pentru aceasta, ar trebui să încercați să aveți conținutul panoului inactiv scris în linie în documentul HTML, apoi să utilizați CSS și JavaScript pentru a stila și a ascunde panoul vizual, ceea ce este mai rapid decât a solicita o reîncărcare a paginii sau a solicita date de la distanță sursă.

Evitați reîncărcările paginilor când comutați între panouri, deoarece acest lucru întârzie semnificativ navigarea între panouri. Conținutul încărcat de la distanță folosind Ajax poate fi o opțiune pentru informații dinamice și localizate de la distanță, dar reprezintă o provocare pentru utilizatorii de cititoare de ecran, care ar putea să nu fie conștienți de nodurile inserate în mod asincron DOM în arborele documentului.” (prin Smashing Magazine)

Acest sfat nu se aplică celor care folosesc navigarea cu file ca navigare principală, dar cei care folosesc navigarea cu file așa cum sunt Air Canada și Buffer ar trebui să ia notă.

Concluzie

Navigarea cu file poate avea ca rezultat „o conversație bună” cu vizitatorii tăi. Dacă este implementat corespunzător, este suficient de clar și de precis pentru a le spune vizitatorilor: exact unde sunt, exact ce le este disponibil și exact cum pot accesa ceea ce le este disponibil.

Cu ajutorul testării și optimizării utilizării, acea conversație se îmbunătățește și mai mult.

Ca în orice, totuși, asigurați-vă că vă efectuați cercetarea (în acest caz, cercetarea arhitecturii informaționale) și testați, testați, testați.

În concluzie…

1. Navigarea cu file poate fi utilizată ca sistem de navigație principal, precum și dincolo de nivelurile de navigație primară sau secundară.
2. Încercați navigarea cu file atunci când aveți două până la nouă categorii solide, similare, cu nume scurte care se potrivesc într-un singur rând.
3. Nu încercați navigarea cu file atunci când doriți ca oamenii să compare conținutul sau vă gândiți să adăugați un link „Mai mult...”.
4. Puteți urma cele mai bune practici de implementare, dar...
5. Ceea ce contează sunt datele dvs. Vizitatorilor tăi le este dificil să navigheze pe site-ul tău cu navigarea cu file? Efectuați teste de utilizare pentru a afla.
6. Remediați problemele care apar. Sau, dacă există multe probleme costisitoare, luați în considerare un alt sistem de navigație.
7. Accesibilitatea, fragmentarea și viteza contează atunci când vine vorba de navigarea cu file, așa că acordați o atenție deosebită.

Lucrezi la ceva legat de asta? Postează un comentariu în comunitatea CXL !