Brändid, kes kasutavad nutikaid UX mustreid, et muuta navigeerimine lihtsaks

Sissejuhatus

Halb navigeerimine hävitab rohkem veebisaite kui halb disain. Kui kasutajad ei suuda aru saada, kuhu järgmisena klõpsata, lahkuvad nad.

Uuringute kohaselt lahkub 61,5% inimestest veebisaitidelt, kuna navigeerimine tekitab neis segadust. See on väga suur number, mis tähendab, et enamik veebisaite kaotab külastajaid enne, kui neil on üldse võimalus neid konverteerida.

Brändid, kes teevad seda õigesti, ei tugine nutikatele trikkidele ega ebatavalistele menüüdele. Nad kasutavad spetsiifilisi UX-mustreid, mis eemaldavad igast interaktsioonist takistused. Need mustrid on teadlikud valikud selle kohta, kuidas teavet organiseeritakse ja esitatakse.

Oleme uurinud kümneid hästi toimivaid veebisaite, et teha kindlaks, mis tegelikult toimib. Allpool käsitletavad mustrid esinevad erinevates valdkondades, alates e-kaubandusest kuni SaaS-platvormideni. Igaüks neist lahendab konkreetse navigeerimisprobleemi ja neid saab rakendada ilma kogu veebisaiti ümber kujundamata.

Vaatame lähemalt, mida tegid tegelikud brändid ja kuidas saate nende lähenemist kohandada.

Kinnitatud navigeerimine kui hoogu säilitav muster

Kinnitatud navigeerimine hoiab olulised valikud nähtaval, kui kasutajad lehekülge kerivad. See eemaldab takistused hetkedel, mil inimesed otsustavad, mida järgmisena teha.

Pikkadel lehtedel on see oluline. Kasutajad kujundavad oma kavatsused sageli lugemise käigus. Püsiv navigeerimine võimaldab neil kohe tegutseda, ilma et nad peaksid keskendumist katkestama või lehe ülaossa tagasi kerima.

See mudel austab hoogu. Kasutajad ei pea pausi tegema, ümber orienteeruma ega juhtnuppe otsima. Veebisait reageerib sama kiiresti kui nad mõtlevad. Aja jooksul loob see usaldust ja vähendab lahkumist, eriti lehtedel, kus on segatud haridus, hinnad ja konversiooniteed.

Väärtus sõltub rakendamisest. Püsiv navigeerimine peaks olema toetav, mitte domineeriv. Halvasti rakendatuna võtab see ruumi või häirib sisu. Puhtalt rakendatuna on see kasulik ja märkamatu.

Kuidas rakendada kleepuvat navigeerimist:

• Määrake menüü ainus eesmärk enne selle kujundamist. Toetage kõige tavalisemat järgmist sammu.
• Piirdu ainult põhiliste lehtedega, nagu tooted, hinnad, kontaktid ja tellimine.
• Hoidke menüü kõrgus kompaktne ja ühtlane kõikidel lehtedel.
• Tagage menüü ja lehe sisu vahel tugev kontrast, et see oleks kergesti loetav ka lehekülge kerides.
• Kasutage lihtsaid märgistusi, mis vastavad kasutaja kavatsusele, mitte sisemistele terminitele.
• Lukustage menüü asukoht, et vältida värinaid või suuruse muutumist kerimise ajal.
• Mobiilseadmetel testige pöidla ulatust ja ohutut vahekaugust nuppude ümber.
• Kaaluge hoolikalt kerimise käitumist. Kui ruumist saab probleem, peida menüü kerimisel alla ja näita see kerimisel üles.
• Kontrollige mõju jõudlusele, et kleepuv element ei aeglustaks laadimist ega kerimist.

Custom Sock Lab on bränd, mis kasutab seda mustrit hästi. Nad loovad kohandatud sokke ettevõtetele, üritustele, meeskondadele ja eraklientidele.

Nende kleepuv navigatsioon jääb nähtavaks igal lehel, isegi kui kerite lehe lõppu. Kasutajad, kes sirvivad stiile, materjale või tellimuse detaile, saavad vahetada teekondi koheselt. Menüü jääb lihtsaks ja ühtseks, aidates külastajatel liikuda valikute vahel ilma fookust või edusamme kaotamata.

Allikas: customsocklab.com

Hierarhilised menüümustrid, mis vastavad kasutajate mentaalsetele mudelitele

Hierarhilised menüüd toimivad, kui need peegeldavad seda, kuidas kasutajad juba oma peas teavet organiseerivad.

Inimesed ei sirvi juhuslikult. Nad tulevad lehele ligikaudse ettekujutusega sellest, mida nad tahavad, ja ootavad, et kategooriad kitsendaksid valikuid loogilises järjekorras. Selge segmentatsioon aitab neil edasi liikuda, ilma et nad peaksid iga klõpsu üle järele mõtlema.

See mudel vähendab hõõrdumist, vastates varakult vaikivatele küsimustele. Kasutajad näevad, kus nad asuvad, mis on iga kategooria all ja kui sügavale nad minna saavad. See selgus lühendab otsustamisaja ja vähendab põrkumismäära, eriti veebisaitidel, kus on suured varud või tehnilised tooted. See loob ka usaldust. Kui kategooriad tunduvad tuttavad, usuvad kasutajad, et leiavad, mida vajavad.

Siin on oluline teostus. Halb hierarhia tekitab segadust või sunnib kasutajaid struktuuri uuesti õppima. Tugev hierarhia on esmapilgul selge.

Kuidas rakendada hierarhilisi menüüsid:

• Rühmitage elemendid kasutaja kavatsuste, mitte sisemise tooteloogika alusel.
• Piirata tipptaseme kategooriate arvu mõistliku arvuni.
• Kasutage lihtsaid, kirjeldavaid sildid, mis vastavad otsingukeelele.
• Ava alamkategooriad viivituseta hiirega üle libistamisel või puudutamisel.
• Hoidke kategooriate sügavus võimaluse korral madal.
• Säilita menüüdes ja külgribades ühtne struktuur.
• Järjesta elemendid asjakohasuse, mitte tähestiku järgi.
• Lisage visuaalne vahe, et rühmi selgelt eraldada.
• Toeta kategooriate sees filtreerimist, et valikut kiiremini kitsendada.

Golf Cart Tire Supply rakendab seda lähenemist distsiplineeritult. Nad pakuvad golfikärude rehve, rattaid ja seonduvaid tarvikuid hoolduseks ja uuendamiseks.

Nende peamenüüs on tootekategooriad, mis hiirega üle libistades avanevad ja näitavad kohe tooted või selged alakategooriad. Kasutajad ei pea pimesi klõpsima. Kodulehe vasakul küljel olev külgriba kinnitab sama struktuuri. See jagab tooted suuruse ja tüübi järgi, aidates külastajatel valikuid kiiresti kitsendada.

Mõlemad navigeerimissüsteemid järgivad sama loogikat, mis muudab otsingud ennustatavaks ja tõhusaks.

Allikas: golfcarttiresupply.com

Atribuutidel põhinev menüüdisain, mis peegeldab ostjate toodete filtreerimist

Atribuutidel põhinevad menüüd korraldavad navigeerimise ostjate jaoks kõige olulisemate detailide järgi. Selle asemel, et kasutada ainult laiaulatuslikke kategooriaid, toovad need menüüd varakult esile atribuudid, nagu tüüp, värv, materjal või kasutusala.

See viib navigeerimise kooskõlla sellega, kuidas inimesed tegelikult ostavad, eriti kui kataloogid tunduvad esmapilgul suured või sarnased.

See strateegia lühendab otsustusprotsessi. Ostjad teavad sageli juba enne sirvimist peamised piirangud. Neile võib olla olulisem sobivus, sihtrühm või välimus kui brändinimed või kollektsioonid. Atribuutidel põhinev navigeerimine võimaldab neil neid piiranguid kohe rakendada. See vähendab sirvimise aega ja frustratsiooni. Samuti aitab see kasutajatel tunda, et nad on kontrolli all, mis suurendab valiku tegemise kindlustunnet.

Edu saavutamiseks vajab see lähenemisviis keskendumist ja mõõdukust. Liiga paljud atribuudid tekitavad ülekoormatust, samas kui halb märgistamine tekitab segadust. Eesmärk on selgus, mitte täielikkus.

Kuidas rakendada atribuutidel põhinevat navigeerimist:

• Määrake kindlaks omadused, millele kasutajad toodete võrdlemisel kõige rohkem tähelepanu pööravad.
• Kinnitage need omadused otsingutulemuste ja tugiküsimustega.
• Piirata nähtavaid omadusi kõige olulisemate otsuste tegemise teguritega.
• Kasutage menüüdes, filtrites ja tootelehtedel ühtseid märgistusi.
• Järjesta omadused tähtsuse, mitte sisemise prioriteedi järgi.
• Võimaldage kasutajatel omadusi kombineerida ilma tulemusi lähtestamata.
• Hoidke valikud nähtaval, et kasutajad mõistaksid aktiivseid filtreid.
• Tagage, et filtri uuendamisel jääb jõudlus kiireks.
• Peegeldage atribuutide loogikat nii arvuti- kui ka mobiilseadmete kujunduses.

Mannequin Mall, mis müüb mannekeene jaemüügiks ja moeks, struktureerib kogu oma navigeerimise tooteatribuutide ümber.

Nad korraldavad tooted mannekeenitüübi, soo, vanuserühma ja värvi järgi. See vastab sellele, kuidas ostjad kitsendavad valikuid, kui nad töötavad väljapanekunõuete või brändistandarditega. Külastajad saavad kiiresti filtreerida, ilma et peaksid kategooriate teekondi ära arvama.

Selline struktuur toetab kiiret võrdlemist ja aitab kasutajatel jõuda asjakohaste toodeteni vähemate sammudega.

Allikas: mannequinmall.com

Jalamärgistuse navigeerimine kui sekundaarne avastamismuster

Jalamärgise navigeerimine toetab kasutajaid, kes jõuavad lehe lõppu ilma midagi tegemata. Sel hetkel on nad endiselt huvitatud, kuid ei tea, kuhu edasi minna. Hästi struktureeritud jalamärgis annab neile suuna, ilma et nad peaksid tagasi üles kerima. See toimib vaikse turvavõrguna jätkuvaks uurimiseks.

See muster on abiks, kuna kerimine tähendab sageli hindamist. Kasutajad loevad, võrdlevad ja peatuvad lehe lõpus. Kui jalus pakub selgeid järgmisi samme, hoiab see hoogu üleval. Samuti toob see esile sisu, mis ei kuulu esmasesse navigeerimisse, nagu juhendid, võrdlused või usaldusele keskenduvad lehed. See parandab avastatavust, ilma et peamenüüd segaks.

Täitmine sõltub selgusest ja struktuurist. Jalus peaks olema organiseeritud ja eesmärgipärane. Ülekoormatud jalused aeglustavad otsuste tegemist ja jäävad tähelepanuta.

Kuidas kujundada tõhus jalusnavigatsioon:

• Rühmitage lingid eesmärgi järgi, näiteks uurimine, võrdlus, tugi ja ettevõtte info.
• Kasutage lühikesi, kirjeldavaid sildikesi, mis selgitavad väärtust ühe pilguheiduga.
• Eelistage kasulikke lehekülgi õiguslikele või vähehuvitavatele linkidele.
• Hoidke veergude paigutus kõikidel lehtedel ühtlane.
• Lisage rühmade vahele visuaalne vahe, et parandada loetavust.
• Vältige kogu peamenüü kopeerimist ilma täpsustusteta.
• Lisage võimaluse korral kontekstuaalsed lingid, mis on seotud lehe sisu.
• Veenduge, et lingid jäävad loetavaks ka väiksematel ekraanidel.
• Vaadake jalusanalüüsi, et teha kindlaks, millised lingid tekitavad huvi.

Medical Alert Buyer’s Guide kasutab jalusnavigatsiooni praktilise varuvõimalusena. Veebisait keskendub eakate ja hooldajate jaoks mõeldud meditsiiniliste häiresüsteemide ülevaatamisele ja võrdlemisele.

Kui kasutajad kerivad pikki ülevaateid või võrdlusmaterjale, pakub jalus selget juurdepääsu abilehtedele, nagu ostujuhendid, KKK ja kontaktandmed.

Selline struktuur aitab külastajatel uurimist sujuvalt jätkata. Jalus ei ole ülekoormatud. See pakub lihtsalt loogilisi järgmisi samme, kui kasutajad jõuavad lehe lõppu ja vajavad suuniseid.

Allikas: medicalalertbuyersguide.org

Kontekstuaalne navigeerimine, mis kohandub kasutaja teekonnaga

Kontekstuaalne navigeerimine muutub sõltuvalt sellest, kus kasutajad asuvad ja mida nad teha üritavad. Selle asemel, et sundida üht menüüd teenima kõiki stsenaariume, kohandub liides vastavalt sellele, kuidas kasutaja kavatsus selgemaks muutub. See hoiab navigeerimise asjakohasena ja takistab kasutajatel sorteerida valikuid, mis enam ei kehti.

Kasutajate vajadused muutuvad, kui nad liiguvad veebisaidil. Esimesed külastused keskenduvad orienteerumisele ja usalduse loomisele. Põhjalikumad külastused keskenduvad õppimisele, võrdlemisele või ülesande täitmisele. Kontekstist lähtuv navigeerimine toetab neid muutusi, pakkudes linke, mis vastavad praegusele etapile. See vähendab segadust ja aitab kasutajatel vähem vaeva nägemata edasi liikuda.

Kasu sõltub järjepidevusest. Ootamatud muutused segavad kasutajaid, kui loogika ei ole selge. Edukas kontekstuaalne navigeerimine tundub loomulik, kuna see tugineb struktuurile, mida kasutajad juba mõistavad.

Kuidas rakendada kontekstuaalset navigeerimist:

• Määrake kindlaks kasutajate teekonnad enne navigeerimise olekute kujundamist.
• Hoidke ülemaailmne navigeerimine stabiilne tipptaseme liikumise jaoks.
• Kasutage kontekstimenüüsid ainult siis, kui eesmärk on kitsam.
• Kasutage uue sisu režiimi märkuvaid paigutuse muudatusi.
• Piirata kontekstuaalseid linke praeguse sektsiooniga seotud tegevustega.
• Säilitage järjepidevad sildid globaalsetes ja kohalikes menüüdes.
• Tagage, et kasutajad saaksid kergesti naasta kõrgemale tasandile.
• Testige üleminekuid, et navigeerimine oleks ettearvatav.
• Vältige globaalsete linkide dubleerimist kontekstimenüüdes.

Selle strateegia parim näide on Webflow, visuaalne arendusplatvorm, mis võimaldab disaineritel luua professionaalseid veebisaite ilma koodi kirjutamata.

Koduleheküljel sisaldab menüü oodatavaid SaaS-sektsioone, nagu platvorm, lahendused, ressursid ja hinnad. Kui kasutajad sisenevad ressursside alasse, muutub navigeerimine õppimisele kohandatud külgribaks. Lingid keskenduvad kursustele, sõnastikele, sertifikaatidele ja hariduslikule sisule.

See muudatus toetab uurimistööle suunatud mõtteviisi, ilma et kaotataks juurdepääs peamise veebisaidi struktuurile. Navigatsioon kohandub ilma desorienteerimata, mis hoiab uurimise fokuseeritud ja tõhusa.

Allikas: webflow.com

Allikas: webflow.com

Ennustavad otsingumustrid, mis juhivad kasutajaid tippimise ajal

Ennustav otsing aitab kasutajatel tulemusi kiiremini leida, reageerides reaalajas. Kui kasutajad tippivad, ennustab liides nende kavatsusi ja pakub soovitusi enne, kui nad päringu lõpetavad. See toimib hästi veebisaitidel, kus on suured kataloogid ja kus ainult sirvimine võtab liiga palju aega.

See muster vähendab pingutust kriitilisel hetkel. Kasutajad teavad sageli osa sellest, mida nad tahavad, kuid mitte täpset sõnastust. Ennustav otsing täidab selle lünga, pakkudes koheselt asjakohaseid termineid, kategooriaid ja tooteid. See vähendab veamäära, lühendab tulemusteni jõudmist ja hoiab kasutajad kaasatud, selle asemel et sundida neid proovima ja eksima. See toetab ka avastamist, tuues esile võimalused, mida kasutajad ei ole ehk kaalunud.

Tugev rakendamine sõltub asjakohasusest ja mõõdukusest. Liiga palju soovitusi tekitab segadust. Halb järjestus kahjustab usaldust. Kogemus peaks olema kiire, keskendunud ja abivalmis.

Kuidas ennustavat otsingut rakendada:

• Paigutage otsing sinna, kus kasutajad seda ootavad, ja tehke selle aktiveerimine lihtsaks.
• Laiendage otsinguvälja, et märkida fookust ja kavatsust.
• Näidake soovitusi pärast esimeste tähtede sisestamist.
• Järjesta soovitused populaarsuse ja asjakohasuse järgi.
• Lisage mitut tüüpi tulemusi, näiteks tooted, kategooriad ja sisu.
• Esitage sobivad terminid tulemustes selgelt esile.
• Hoidke tulemused kergesti loetavate vahedega ja visuaalse hierarhiaga.
• Piirata nähtavate tulemuste arvu, et vältida ülekoormust.
• Tagage, et tulemused kuvatakse kõikidel seadmetel viivitamatult.

Petco, mis müüb lemmikloomatoitu, maiustusi, tarbeid ja aksessuaare, rakendab ennustavat otsingut laiaulatuslikult. Nende peamine navigeerimisribal on silmapaistev otsinguriba, mis laieneb kohe, kui kasutajad sellele klõpsavad.

Kui kasutajad hakkavad kirjutama, ennustab liides päringuid ja kuvab seotud otsinguterminid, brändid ja kategooriad. Samuti kuvab see tootetulemused ja seotud artiklid samas laienenud aknas. Kasutajad saavad liikuda ideest tegevuseni, ilma otsingust lahkumata.

See seadistus toetab nii kiireid oste kui ka laiemat uurimist, hoides samal ajal kogemuse keskendunud ja reageerivana.

Allikas: petco.com

Lõplikud mõtted

Nutikas navigeerimine vähendab vaeva, ilma et see endale tähelepanu tõmbaks. Siin käsitletud mustrid toimivad, kuna need arvestavad seda, kuidas inimesed sisu sirvivad, otsuseid teevad ja sisu vahel liikuvad.

Püsivad menüüd toetavad hoogu. Selged hierarhiad vastavad ootustele. Atribuutidel põhinevad teed peegeldavad tegelikku ostukäitumist. Kontekstuaalne navigeerimine kohandub vastavalt eesmärgi täpsustumisele. Ennustav otsing lühendab vajaduse ja tulemuse vahelist vahemaad.

Need lähenemisviisid on edukad, kui neid järgitakse distsiplineeritult. Iga mudel teenib kindlat eesmärki ja ilmub ainult seal, kus see lisab väärtust.

Järgmisteks sammudeks vaadake üle, kuidas kasutajad teie saidil liikuvad. Määrake kindlaks, kus nad kõhklevad, pöörduvad tagasi või lahkuvad. Seejärel rakendage mustrit, mis sobib selle hetke teekonnaga. Väikesed navigeerimise parandused toovad sageli kaasa suure kasu kaasatuse ja konversiooni osas.