Blagovne znamke, ki uporabljajo pametne vzorce UX, da je navigacija brez težav

Uvod

Slaba navigacija uniči več spletnih strani kot slab dizajn. Ko uporabniki ne vedo, kam naj kliknejo, spletno stran zapustijo.

Raziskave kažejo, da 61,5 % ljudi zapusti spletno stran, ker jih navigacija zmede. To je ogromna številka, ki pomeni, da večina spletnih strani izgublja obiskovalce, še preden jih sploh uspe pridobiti.

Blagovne znamke, ki to počnejo pravilno, se ne zanašajo na pametne trike ali nenavadne menije. Uporabljajo posebne vzorce UX, ki odpravljajo trenja pri vsaki interakciji. Ti vzorci so premišljene odločitve o tem, kako se informacije organizirajo in predstavijo.

Preučili smo na desetine visoko uspešnih spletnih strani, da bi ugotovili, kaj dejansko deluje. Vzorci, ki jih bomo obravnavali v nadaljevanju, se pojavljajo v različnih panogah, od e-trgovine do platform SaaS. Vsak od njih rešuje določen problem navigacije, vi pa jih lahko implementirate, ne da bi morali prenoviti celotno spletno stran.

Poglejmo, kaj so storile resnične blagovne znamke in kako lahko njihov pristop prilagodite.

Sticky navigacija kot vzorec za ohranjanje zagona

Sticky navigacija ohranja bistvene možnosti vidne, ko uporabniki pomikajo stran. Odstrani trenja v trenutkih, ko se ljudje odločajo, kaj storiti naprej.

Na dolgih straneh je to pomembno. Uporabniki pogosto oblikujejo namero med branjem. Stalna navigacija jim omogoča, da takoj ukrepajo, ne da bi izgubili fokus ali se pomaknili nazaj na vrh.

Ta vzorec upošteva zagon. Uporabniki se ne potrebujejo ustaviti, preusmeriti ali iskati nadzorne elemente. Spletna stran se odzove tako hitro, kot razmišljajo. Sčasoma to gradi zaupanje in zmanjšuje odhodnost, zlasti na straneh, ki združujejo izobraževanje, cene in poti konverzije.

Vrednost je odvisna od izvedbe. Sticky navigacija mora biti podporna, ne prevladujoča. Slabo izvedena krade prostor ali odvrača pozornost od vsebine. Čista izvedba jo ohranja uporabno in neopazno.

Kako izvesti lepljivo navigacijo:

• Pred oblikovanjem menija določite njegov edini namen. Podprite najpogostejši naslednji korak.
• Omejite povezave le na ključne strani, kot so izdelki, cene, kontakt in naročila.
• Višina naj bo kompaktna in enotna na vseh straneh.
• Zagotovite močan kontrast med menijem in vsebino strani, da ostane berljiv med pomikanjem.
• Uporabite preproste oznake, ki ustrezajo nameri uporabnika, ne pa notranji terminologiji.
• Fiksirate položaj menija, da se med pomikanjem po strani ne trese ali spreminja velikost.
• Na mobilnih napravah preizkusite doseg palca in varen razmik med gumbi.
• Previdno premislite o načinu pomikanja. Če je prostor problematičen, skrijte meni pri pomikanju navzdol in ga razkrijte pri pomikanju navzgor.
• Preverite vpliv na zmogljivost, da lepljivi element ne upočasni nalaganja ali pomikanja.

Custom Sock Lab je blagovna znamka, ki ta vzorec dobro uporablja. Ustvarjajo nogavice po meri za podjetja, dogodke, ekipe in posamezne stranke.

Njihova lepljiva navigacija ostane vidna na vseh straneh, tudi ko se pomaknete do dna. Uporabniki, ki brskajo po stilih, materialih ali podrobnostih naročila, lahko takoj preklopijo med potmi. Meni ostane preprost in dosleden, kar obiskovalcem pomaga premikati se med možnostmi, ne da bi izgubili fokus ali napredek.

Vir: customsocklab.com

Hierarhični vzorci menija, ki ustrezajo mentalnim modelom uporabnikov

Hierarhični meniji delujejo, ko odražajo način, kako uporabniki že organizirajo informacije v svojih glavah.

Ljudje ne brskajo naključno. Prihajajo z grobo predstavo o tem, kar želijo, in pričakujejo, da bodo kategorije zožile izbiro v logičnem vrstnem redu. Jasna segmentacija jim pomaga napredovati, ne da bi morali premisliti vsak klik.

Ta vzorec zmanjša trenja, saj zgodaj odgovori na tihe vprašanja. Uporabniki vidijo, kje so, kaj je v vsaki kategoriji in kako globoko lahko gredo. Ta jasnost skrajša čas odločanja in zmanjša stopnjo odboja, zlasti na spletnih mestih z velikimi zalogami ali tehničnimi izdelki. Prav tako gradi zaupanje. Ko so kategorije znane, uporabniki zaupajo, da bodo našli, kar potrebujejo.

Tu je pomembna izvedba. Slaba hierarhija ustvarja nered ali prisili uporabnike, da se ponovno naučijo strukturo. Močna hierarhija je očitna že na prvi pogled.

Kako izvesti hierarhične menije:

• Razvrstite elemente glede na namero uporabnika, ne glede na notranjo logiko izdelka.
• Omejite kategorije najvišje ravni na obvladljivo število.
• Uporabite preproste, opisne oznake, ki ustrezajo jeziku iskanja.
• Podkategorije razkrijte ob preletu ali dotiku brez zamude.
• Kadar je mogoče, ohranite globino kategorij plitvo.
• Ohranite dosledno strukturo v menijih in stranskih vrsticah.
• Razvrstite elemente po pomembnosti, ne po abecednem redu.
• Dodajte vizualne razmike, da jasno ločite skupine.
• Podprite filtriranje znotraj kategorij za hitrejše zoževanje.

Golf Cart Tire Supply ta pristop dosledno uporablja. Ponujajo pnevmatike, kolesa in pripadajoče dodatke za vzdrževanje in nadgradnjo golfskih vozičkov.

Njihov glavni meni prikazuje kategorije izdelkov, ki se razširijo ob preletu z miško in takoj razkrijejo izdelke ali jasne podkategorije. Uporabniki ne potrebujejo slepega klikanja. Na domači strani levi stranski meni okrepi isto strukturo. Razvršča izdelke po podrobnostih, kot so velikost in tip, kar obiskovalcem pomaga hitro zožiti izbiro.

Oba navigacijska sistema sledita isti logiki, kar omogoča predvidljivo in učinkovito raziskovanje.

Vir: golfcarttiresupply.com

Oblika menija, ki temelji na lastnostih in odraža način, kako kupci filtrirajo izdelke

Meniji, ki temeljijo na lastnostih, organizirajo navigacijo glede na podrobnosti, ki so za kupce najbolj pomembne. Namesto da vodijo samo s širokimi kategorijami, ti meniji že na začetku prikazujejo lastnosti, kot so tip, barva, material ali uporaba.

To usklajuje navigacijo z dejanskim načinom nakupovanja, zlasti kadar so katalogi na prvi pogled obsežni ali podobni.

Ta strategija skrajša pot do odločitve. Kupci pogosto poznajo ključne omejitve, še preden začnejo brskati. Morda jim je bolj pomembna ustreznost, ciljna skupina ali videz kot blagovne znamke ali kolekcije. Navigacija na podlagi atributov jim omogoča, da te omejitve uporabijo že na začetku. To skrajša čas pregledovanja in zmanjša frustracijo. Uporabnikom pomaga tudi, da se počutijo, kot da imajo nadzor, kar poveča njihovo samozavest med izbiranjem.

Da bi bil ta pristop uspešen, je potrebna osredotočenost in zadržanost. Preveč atributov je preveč, slabo označevanje pa povzroča zmedo. Cilj ostaja jasnost, ne popolnost.

Kako izvesti navigacijo na podlagi atributov:

• Ugotovite, na katere lastnosti se uporabniki najbolj zanašajo pri primerjavi izdelkov.
• Preverite te lastnosti s podatki iskanja in podporo vprašanj.
• Omejite vidne lastnosti na najmočnejše dejavnike odločanja.
• Uporabite enotne oznake v menijih, filtrih in na straneh izdelkov.
• Atribute razvrstite po pomembnosti, ne po notranji prioriteti.
• Uporabnikom omogočite kombiniranje lastnosti brez ponastavitve rezultatov.
• Izbire naj ostanejo vidne, da uporabniki razumejo aktivne filtre.
• Zagotovite, da ostanejo zmogljivosti hitre tudi med posodabljanjem filtrov.
• Uporabite enako logiko atributov v namiznih in mobilnih razporeditvah.

Mannequin Mall, ki prodaja manekene za trgovino na drobno in modo, je celotno navigacijo strukturiral okoli atributov izdelkov.

Izdelke organizirajo po tipu manekena, predstavitvi spola, starostni skupini in barvi. To ustreza načinu, kako kupci zožijo možnosti, ko delajo z zahtevami za razstavljanje ali standardi blagovne znamke. Obiskovalci lahko hitro filtrirajo, ne da bi ugibali poti kategorij.

Struktura omogoča hitro primerjavo in uporabnikom pomaga, da z manj koraki pridejo do ustreznih izdelkov.

Vir: mannequinmall.com

Navigacija v nogi strani kot sekundarni vzorec odkrivanja

Navigacija v nogi strani pomaga uporabnikom, ki pridejo na dno strani, ne da bi kaj storili. V tem trenutku so še vedno zainteresirani, vendar ne vedo, kam naj gredo naprej. Dobro strukturirana noga strani jim daje smer, ne da bi jih prisilila, da se vrnejo na vrh. Deluje kot tiho varnostno omrežje za nadaljnje raziskovanje.

Ta vzorec je koristen, ker pomikanje pogosto signalizira oceno. Uporabniki berejo, primerjajo in se ustavijo blizu konca strani. Ko noga strani ponuja jasne naslednje korake, ohranja zagon. Prikaže tudi vsebino, ki ne sodi v primarno navigacijo, kot so vodniki, primerjave ali strani, osredotočene na zaupanje. To izboljša odkritost, ne da bi se glavni meni preveč zapolnil.

Izvajanje je odvisno od jasnosti in strukture. Spodnji del strani mora biti organiziran in namenski. Preobremenjeni spodnji deli strani upočasnjujejo odločanje in se ignorirajo.

Kako oblikovati učinkovito navigacijo v nogi strani:

• Povezave razvrstite po namenu, na primer raziskovanje, primerjava, podpora in informacije o podjetju.
• Uporabite kratke, opisne oznake, ki na prvi pogled pojasnjujejo vrednost.
• Dajte prednost stranem z visoko uporabnostjo pred pravnimi povezavami ali povezavami z nizkim zanimanjem.
• Ohranite dosledno postavitev stolpcev na vseh straneh.
• Dodajte vizualni razmik med skupinami, da izboljšate preglednost.
• Izogibajte se podvajanju celotnega glavnega menija brez izboljšav.
• Po možnosti vključite kontekstualne povezave, povezane z vsebino strani.
• Poskrbite, da povezave ostanejo berljive tudi na manjših zaslonih.
• Preglejte analitiko v nogi strani, da ugotovite, katere povezave pritegnejo največ pozornosti.

Medical Alert Buyer’s Guide uporablja navigacijo v nogi kot praktično rezervno plast. Spletno mesto se osredotoča na pregledovanje in primerjanje sistemov za medicinsko opozarjanje za starejše odrasle in negovalce.

Ko uporabniki pregledujejo dolge preglede ali primerjalne vsebine, spodnji del strani ponuja jasen dostop do podpornih strani, kot so vodniki za nakup, pogosta vprašanja in kontaktne informacije.

Ta struktura pomaga obiskovalcem nadaljevati raziskovanje brez težav. Spodnji del strani ni preobremenjen. Preprosto ponuja logične naslednje korake, ko uporabniki pridejo na konec strani in potrebujejo navodila.

Vir: medicalalertbuyersguide.org

Kontekstualna navigacija, ki se prilagaja poti uporabnika

Kontekstualna navigacija se spreminja glede na to, kje so uporabniki in kaj poskušajo narediti. Namesto da bi en meni služil za vse scenarije, se vmesnik prilagaja, ko postane namera jasnejša. Tako navigacija ostane relevantna in uporabniki se ne ukvarjajo z možnostmi, ki niso več primerne.

Potrebe uporabnikov se spreminjajo, ko se premikajo po spletnem mestu. Prvi obiski so osredotočeni na orientacijo in zaupanje. Globlji obiski so osredotočeni na učenje, primerjavo ali izvedbo naloge. Kontekstualna navigacija podpira te spremembe s prikazovanjem povezav, ki ustrezajo trenutni stopnji. To zmanjša motnje in uporabnikom pomaga napredovati z manj napora.

Prednost je odvisna od doslednosti. Nenadne spremembe zmedejo uporabnike, če logika ni jasna. Uspešna kontekstualna navigacija se zdi naravna, ker temelji na strukturi, ki jo uporabniki že razumejo.

Kako izvesti kontekstualno navigacijo:

• Pred oblikovanjem navigacijskih stanj opredelite poti uporabnikov.
• Ohranite globalno navigacijo stabilno za premikanje na najvišji ravni.
• Kontekstualne menije uvedite le, ko se namen zoži.
• Uporabite spremembe postavitve, ki signalizirajo nov način vsebine.
• Kontekstualne povezave omejite na dejanja, ki so relevantna za trenutni razdelek.
• Ohranite dosledne oznake v globalnih in lokalnih menijih.
• Zagotovite, da se uporabniki lahko enostavno vrnejo na strani višje ravni.
• Preizkusite prehode, da se navigacija zdi predvidljiva.
• Izogibajte se podvajanju globalnih povezav v kontekstualnih menijih.

Najboljši primer te strategije je Webflow, vizualna razvojna platforma, ki oblikovalcem omogoča ustvarjanje profesionalnih spletnih strani brez pisanja kode.

Na domači strani meni vključuje pričakovane SaaS-oddelke, kot so Platforma, Rešitve, Viri in Cene. Ko uporabniki vstopijo v območje Viri, se navigacija preusmeri na stranski trak, prilagojen učenju. Povezave se osredotočajo na tečaje, slovarje, certifikate in izobraževalne vsebine.

Ta sprememba podpira raziskovalno usmerjeno mišljenje, ne da bi onemogočila dostop do glavne strukture spletnega mesta. Navigacija se prilagaja, ne da bi povzročala zmedo, kar omogoča osredotočeno in učinkovito raziskovanje.

Vir: webflow.com

Vir: webflow.com

Prediktivni vzorci iskanja, ki vodijo uporabnike med tipkanjem

Prediktivno iskanje pomaga uporabnikom hitreje doseči rezultate, saj odgovarja v realnem času. Med tipkanjem vmesnik predvidi namero in ponudi predloge, še preden uporabnik konča poizvedbo. To deluje dobro na spletnih mestih z obsežnimi katalogi, kjer samo brskanje traja predolgo.

Ta vzorec zmanjša napor v kritičnem trenutku. Uporabniki pogosto vedo del tega, kar želijo, vendar ne poznajo natančnega izraza. Prediktivno iskanje zapolni to vrzel s takojšnjim predlaganjem ustreznih izrazov, kategorij in izdelkov. Zmanjša stopnjo napak, skrajša pot do rezultatov in ohranja zanimanje uporabnikov, namesto da jih sili v iskanje po metodi poskusa in napake. Podpira tudi odkrivanje, saj prikaže možnosti, ki jih uporabniki morda niso upoštevali.

Učinkovita izvedba temelji na relevantnosti in zadržanosti. Preveč predlogov povzroča zmedo. Slabo razvrščanje zmanjšuje zaupanje. Izkušnja mora biti hitra, osredotočena in koristna.

Kako izvesti prediktivno iskanje:

• Iskalnik namestite tam, kjer ga uporabniki pričakujejo, in poskrbite, da ga je mogoče enostavno aktivirati.
• Razširite iskalno polje, da označite fokus in namen.
• Prikažite predloge po prvih nekaj znakih.
• Predloge razvrstite po priljubljenosti in relevantnosti.
• Vključite več vrst rezultatov, kot so izdelki, kategorije in vsebina.
• V rezultatih jasno poudarite ujemajoče se izraze.
• Z razmiki in vizualno hierarhijo poskrbite, da so rezultati pregledni.
• Omeji število vidnih rezultatov, da se izogneš preobremenitvi.
• Zagotovite, da ostane zmogljivost takojšnja na vseh napravah.

Petco, ki prodaja hrano, priboljške, potrebščine in dodatke za hišne živali, uporablja prediktivno iskanje v velikem obsegu. Njihova glavna navigacija ima vidno iskalno vrstico, ki se razširi, takoj ko uporabniki kliknejo nanjo.

Medtem ko uporabniki tipkajo, vmesnik predvideva poizvedbe in prikaže povezane iskalne izraze, blagovne znamke in kategorije. V istem razširjenem oknu prikaže tudi rezultate izdelkov in povezane članke. Uporabniki lahko preidejo od ideje k dejanju, ne da bi zapustili iskalni način.

Ta nastavitev omogoča tako hitre nakupe kot tudi širše raziskovanje, hkrati pa ohranja izkušnjo osredotočeno in odzivno.

Vir: petco.com

Zaključne misli

Pametna navigacija odpravlja napor, ne da bi pritegnila pozornost. Vzorci, ki so tukaj obravnavani, delujejo, ker upoštevajo način, kako ljudje brskajo, se odločajo in se premikajo po vsebini.

Vztrajni meniji podpirajo zagon. Jasne hierarhije ustrezajo pričakovanjem. Potrebe, ki temeljijo na lastnostih, odražajo dejansko nakupno vedenje. Kontekstualna navigacija se prilagaja, ko se namera izostri. Predvidljivo iskanje skrajša razdaljo med potrebo in rezultatom.

Ti pristopi so uspešni, če ostanejo disciplinirani. Vsak vzorec služi določenemu namenu in se pojavi le tam, kjer dodaja vrednost.

Za naslednje korake preglejte, kako se uporabniki gibljejo po vaši spletni strani. Ugotovite, kje oklevajo, se vračajo nazaj ali odhajajo. Nato uporabite vzorec, ki ustreza tistemu trenutku v potovanju. Majhne izboljšave navigacije pogosto prinesejo ogromne koristi v smislu vključenosti in konverzije.