Prekės ženklai, naudojantys išmaniuosius UX modelius, kad navigacija būtų lengvesnė

Įvadas

Prasta navigacija pražudo daugiau svetainių nei blogas dizainas. Kai vartotojai negali suprasti, kur spustelėti toliau, jie išeina.

Tyrimų duomenimis, 61,5 % žmonių palieka svetaines, nes navigacija juos glumina. Tai didžiulis skaičius, o tai reiškia, kad dauguma svetainių praranda lankytojus dar prieš jiems suteikiant galimybę juos konvertuoti.

Prekės ženklai, kurie tai daro teisingai, nesiremia gudriais triukais ar neįprastais meniu. Jie naudoja specifinius UX modelius, kurie pašalina trintį iš kiekvienos sąveikos. Šie modeliai yra apgalvoti sprendimai, kaip informacija yra organizuojama ir pateikiama.

Mes ištyrėme dešimtis gerai veikiančių svetainių, kad nustatytume, kas iš tiesų veikia. Toliau aptariami modeliai pasikartoja įvairiose pramonės šakose, nuo elektroninės komercijos iki SaaS platformų. Kiekvienas iš jų sprendžia konkretų navigacijos problemą, ir juos galima įgyvendinti be visos svetainės pertvarkymo.

Išnagrinėkime, ką padarė realūs prekių ženklai ir kaip galite pritaikyti jų metodą.

Sticky Navigation kaip impulsą išlaikantis modelis

Sticky navigation leidžia vartotojams matyti svarbiausias parinktis, kai jie slenka puslapį. Tai pašalina trintį momentais, kai žmonės sprendžia, ką daryti toliau.

Ilgose puslapiuose tai yra svarbu. Vartotojai dažnai nusprendžia, ką daryti, dar nesibaigus skaitymui. Nuolatinė navigacija leidžia jiems veikti iš karto, nesukeliant dėmesio sutrikimo ar nereikia slinkti atgal į viršų.

Šis modelis išlaiko pagreitį. Vartotojams nereikia sustoti, persiorientuoti ar ieškoti valdymo elementų. Svetainė reaguoja taip greitai, kaip jie mąsto. Laikui bėgant tai kuria pasitikėjimą ir mažina atsisakymų skaičių, ypač puslapiuose, kuriuose derinami švietimas, kainos ir konversijos keliai.

Vertė priklauso nuo įgyvendinimo. Nuolatinė navigacija turėtų būti pagalbinė, o ne dominuojanti. Netinkamai naudojama, ji atima erdvę arba atitraukia dėmesį nuo turinio. Švarus įgyvendinimas užtikrina jos naudingumą ir nepastebimumą.

Kaip įgyvendinti lipniąją navigaciją:

• Prieš kurdami meniu, nuspręskite, kokiam tikslui jis bus skirtas. Remkite dažniausiai pasitaikantį kitą žingsnį.
• Nuorodas apribokite tik pagrindinėmis puslapiais, pvz., produktais, kainomis, kontaktais ir užsakymais.
• Išlaikykite kompaktišką ir nuoseklų aukštį visose puslapiuose.
• Užtikrinkite stiprų kontrastą tarp meniu ir puslapio turinio, kad jis liktų įskaitomas slenkant puslapį.
• Naudokite paprastas etiketes, atitinkančias vartotojo ketinimus, o ne vidinę terminologiją.
• Užfiksuokite meniu padėtį, kad slenkant nebūtų drebėjimo ar dydžio keitimo.
• Mobiliajame įrenginyje patikrinkite, ar mygtukai yra pasiekiami nykščiu ir ar aplink juos yra pakankamai vietos.
• Atidžiai apsvarstykite slinkties elgesį. Jei trūksta vietos, paslėpkite meniu slinkdami žemyn ir atskleiskite jį slinkdami aukštyn.
• Patikrinkite poveikį našumui, kad lipnus elementas nesulėtintų įkėlimo ar slinkimo.

„Custom Sock Lab“ yra prekės ženklas, kuris gerai naudoja šį modelį. Jie kuria individualias kojines įmonėms, renginiams, komandoms ir individualiems klientams.

Jų lipni navigacija lieka matoma kiekviename puslapyje, netgi kai nusileidžiate į puslapio apačią. Vartotojai, naršantys stilių, medžiagų ar užsakymų detales, gali iš karto pereiti iš vieno kelio į kitą. Meniu lieka paprastas ir nuoseklus, padėdamas lankytojams pereiti per parinktis neprarandant dėmesio ar pažangos.

Šaltinis: customsocklab.com

Hierarchiniai meniu modeliai, atitinkantys vartotojų mąstymo modelius

Hierarchiniai meniu veikia, kai atspindi tai, kaip vartotojai jau organizuoja informaciją savo galvose.

Žmonės neperžiūri atsitiktinai. Jie atvyksta turėdami apytikslę idėją, ko nori, ir tikisi, kad kategorijos susiaurins pasirinkimus logiška tvarka. Aiški segmentacija padeda jiems judėti į priekį, nesvarstydami kiekvieno paspaudimo.

Šis modelis sumažina trintį, nes iš anksto atsako į tylius klausimus. Vartotojai mato, kur jie yra, kas yra kiekvienoje kategorijoje ir kaip giliai jie gali eiti. Toks aiškumas sutrumpina sprendimo priėmimo laiką ir sumažina atmetimo rodiklį, ypač svetainėse su dideliais asortimentais ar techniniais produktais. Tai taip pat stiprina pasitikėjimą. Kai kategorijos atrodo pažįstamos, vartotojai tiki, kad ras tai, ko jiems reikia.

Čia svarbus įgyvendinimas. Blogai sukurta hierarchija sukelia netvarką arba verčia vartotojus iš naujo mokytis struktūros. Stipri hierarchija yra akivaizdi iš pirmo žvilgsnio.

Kaip įgyvendinti hierarchinius meniu:

• Grupuokite elementus pagal vartotojo ketinimus, o ne pagal vidinę produkto logiką.
• Apribokite aukščiausio lygio kategorijas iki valdomo skaičiaus.
• Naudokite paprastas, aprašomąsias etiketes, atitinkančias paieškos kalbą.
• Atskleiskite pakategorijas, kai užvedate pelę arba bakstelėjate, be delsimo.
• Kiek įmanoma, išlaikykite kategorijų gylį nedidelį.
• Išlaikykite nuoseklią struktūrą meniuose ir šoninėse juostose.
• Rūšiuokite elementus pagal aktualumą, o ne pagal abėcėlę.
• Pridėkite vizualius tarpelius, kad aiškiai atskirtumėte grupes.
• Palaikykite filtravimą kategorijose, kad būtų galima greičiau susiaurinti paiešką.

„Golf Cart Tire Supply“ šį metodą taiko labai griežtai. Jie tiekia golfo vežimėlių padangas, ratus ir susijusius priedus priežiūrai ir atnaujinimui.

Jų pagrindiniame meniu rodomos produktų kategorijos, kurios išsiskleidžia, kai užvedate pelę, ir iš karto rodo produktus arba aiškias pakategorijas. Vartotojai neturi spaudinėti aklai. Pagrindiniame puslapyje kairėje pusėje esantis šoninis meniu sustiprina tą pačią struktūrą. Jis segmentuoja produktus pagal tokius duomenis kaip dydis ir tipas, padėdamas lankytojams greitai susiaurinti pasirinkimą.

Abi navigacijos sistemos veikia pagal tą pačią logiką, todėl naršymas yra nuspėjamas ir efektyvus.

Šaltinis: golfcarttiresupply.com

Atributais pagrįstas meniu dizainas, atspindintis pirkėjų produktų filtravimo būdą

Atributais pagrįsti meniu organizuoja navigaciją pagal detales, kurios pirkėjams yra svarbiausios. Vietoj to, kad būtų pateikiamos tik plačios kategorijos, šie meniu iš karto rodo tokius atributus kaip tipas, spalva, medžiaga ar naudojimo atvejis.

Tai suderina navigaciją su tuo, kaip žmonės iš tikrųjų perka, ypač kai katalogai iš pirmo žvilgsnio atrodo dideli ar panašūs.

Ši strategija sutrumpina sprendimų priėmimo procesą. Pirkėjai dažnai žino pagrindinius apribojimus dar prieš pradėdami naršyti. Jiems gali būti svarbesnis tinkamumas, auditorija ar išvaizda nei prekės ženklai ar kolekcijos. Atributais pagrįsta navigacija leidžia jiems iš anksto taikyti šiuos apribojimus. Tai sutrumpina peržiūros laiką ir sumažina nusivylimą. Tai taip pat padeda vartotojams jaustis kontroliuojantiems situaciją, o tai didina pasitikėjimą pasirenkant.

Kad šis metodas būtų sėkmingas, reikia susitelkti ir laikytis ribų. Per daug atributų gali būti per daug, o prastas ženklinimas gali suklaidinti. Tikslas yra aiškumas, o ne išsamumas.

Kaip įgyvendinti atributais pagrįstą navigaciją:

• Nustatykite savybes, kuriomis vartotojai labiausiai remiasi lygindami produktus.
• Patikrinkite šiuos atributus naudodami paieškos duomenis ir pagalbinius klausimus.
• Ribokite matomus atributus iki svarbiausių sprendimų veiksnių.
• Naudokite nuoseklias etiketes meniuose, filtruose ir produktų puslapiuose.
• Atributus surūšiuokite pagal svarbą, o ne pagal vidinį prioritetą.
• Leiskite vartotojams derinti savybes be rezultatų iš naujo nustatymo.
• Išsaugokite pasirinkimus matomus, kad vartotojai suprastų aktyvius filtrus.
• Užtikrinkite, kad filtruojant puslapis veiktų greitai.
• Atvaizduokite atributų logiką kompiuterio ir mobiliojo įrenginio išdėstyme.

„Mannequin Mall“, parduodanti manekenus mažmeninei prekybai ir mados pramonei, visą navigaciją struktūrizuoja pagal produktų atributus.

Jie organizuoja produktus pagal manekenų tipą, lytį, amžiaus grupę ir spalvą. Tai atitinka tai, kaip pirkėjai siaurina pasirinkimo galimybes, kai dirba su ekspozicijos reikalavimais ar prekės ženklo standartais. Lankytojai gali greitai filtruoti, nesvarstydami kategorijų kelių.

Ši struktūra leidžia greitai palyginti produktus ir padeda vartotojams pasiekti reikiamus produktus per mažiau žingsnių.

Šaltinis: mannequinmall.com

Apatinės navigacijos juosta kaip antrinis atradimo modelis

Apatinės navigacijos juosta padeda vartotojams, kurie pasiekia puslapio apačią, nesiimdami jokių veiksmų. Tuo metu jie vis dar yra suinteresuoti, bet nežino, kur eiti toliau. Gerai struktūrizuota apatinė navigacijos juosta suteikia jiems kryptį, nereikalaujant grįžti atgal į viršų. Ji veikia kaip tylus saugumo tinklas tolesniam tyrinėjimui.

Šis modelis padeda, nes slinktis dažnai reiškia vertinimą. Vartotojai skaito, lygina ir sustoja prie puslapio pabaigos. Kai apačioje pateikiami aiškūs tolesni veiksmai, išlaikomas impulsas. Taip pat pateikiamas turinys, kuris nepriklauso pagrindinei navigacijai, pvz., vadovai, palyginimai ar pasitikėjimui skirti puslapiai. Tai pagerina atradimą, nesukeliant netvarkos pagrindiniame meniu.

Įgyvendinimas priklauso nuo aiškumo ir struktūros. Apačia turi būti organizuota ir tikslinga. Perkrauta apačia lėtina sprendimų priėmimą ir yra ignoruojama.

Kaip sukurti veiksmingą apatinės juostos navigaciją:

• Grupuokite nuorodas pagal tikslą, pvz., tyrimai, palyginimas, palaikymas ir informacija apie įmonę.
• Naudokite trumpas, aprašomąsias etiketes, kurios iš pirmo žvilgsnio paaiškina vertę.
• Teikite pirmenybę naudingoms puslapiams, o ne teisinėms ar mažai įdomioms nuorodoms.
• Išlaikykite vienodą stulpelių išdėstymą visose puslapiuose.
• Pridėkite vizualų tarpą tarp grupių, kad būtų lengviau skaityti.
• Venkite visos pagrindinio meniu kopijavimo be patobulinimų.
• Jei įmanoma, įtraukite kontekstines nuorodas, susijusias su puslapio turiniu.
• Užtikrinkite, kad nuorodos būtų įskaitomos ir mažesniuose ekranuose.
• Peržiūrėkite apačios analizės duomenis, kad nustatytumėte, kurios nuorodos sulaukia didžiausio susidomėjimo.

„Medical Alert Buyer’s Guide“ naudoja apatinės navigacijos juostą kaip praktišką atsarginį sluoksnį. Ši svetainė skirta vyresnio amžiaus žmonių ir jų globėjų medicininių pavojaus signalų sistemų apžvalgai ir palyginimui.

Kai vartotojai naršo ilgus apžvalgų ar palyginimų turinius, apačioje pateikiama aiški prieiga prie pagalbinių puslapių, pvz., pirkimo vadovų, DUK ir kontaktų išteklių.

Tokia struktūra padeda lankytojams tęsti paiešką be trukdžių. Apačia nėra perkrauta. Ji tiesiog siūlo logiškus tolesnius veiksmus, kai vartotojai pasiekia puslapio pabaigą ir jiems reikia nurodymų.

Šaltinis: medicalalertbuyersguide.org

Kontekstinė navigacija, prisitaikanti prie vartotojo kelionės

Kontekstinė navigacija keičiasi priklausomai nuo to, kur yra vartotojai ir ką jie bando daryti. Vietoj to, kad vienintelis meniu būtų pritaikytas visoms situacijoms, sąsaja prisitaiko, kai ketinimas tampa aiškesnis. Tai užtikrina navigacijos aktualumą ir neleidžia vartotojams ieškoti variantų, kurie jau nebetinka.

Vartotojų poreikiai keičiasi, kai jie naršo svetainėje. Ankstyvieji apsilankymai yra skirti orientacijai ir pasitikėjimui. Vėlesni apsilankymai yra skirti mokymuisi, palyginimui ar užduočių atlikimui. Kontekstinė navigacija palaiko šiuos pokyčius, pateikdama nuorodas, kurios atitinka esamą etapą. Tai sumažina dėmesio blaškymą ir padeda vartotojams judėti į priekį su mažesniu pastangų kiekiu.

Nauda priklauso nuo nuoseklumo. Staigūs pokyčiai vartotojus supainioja, jei logika nėra aiški. Sėkminga kontekstinė navigacija atrodo natūrali, nes ji remiasi struktūra, kurią vartotojai jau supranta.

Kaip įgyvendinti kontekstinę navigaciją:

• Prieš kurdami navigacijos būsenas, apibrėžkite vartotojų keliones.
• Užtikrinkite, kad bendroji navigacija būtų stabili aukščiausio lygio judėjimui.
• Kontekstinius meniu įtraukite tik tada, kai tikslas tampa konkretesnis.
• Naudokite išdėstymo pakeitimus, kurie signalizuoja apie naują turinio režimą.
• Kontekstines nuorodas apribokite veiksmais, susijusiais su dabartiniu skyriumi.
• Palaikykite nuoseklias etiketes visuotiniuose ir vietiniuose meniuose.
• Užtikrinkite, kad vartotojai galėtų lengvai grįžti į aukštesnio lygio puslapius.
• Išbandykite perėjimus, kad navigacijos pokyčiai būtų nuspėjami.
• Venkite globalių nuorodų dubliavimo kontekstiniuose meniuose.

Puikus šios strategijos pavyzdys yra „Webflow“ – vizualioji kūrimo platforma, leidžianti dizaineriams kurti profesionalias svetaines be kodavimo.

Pagrindiniame puslapyje meniu yra numatytos SaaS sekcijos, pvz., „Platforma“, „Sprendimai“, „Ištekliai“ ir „Kainos“. Kai vartotojai patenka į „Ištekliai“ sritį, navigacija persijungia į šoninę juostą, pritaikytą mokymuisi. Nuorodos yra susijusios su kursais, žodynėliais, sertifikatais ir mokomąja medžiaga.

Šis pakeitimas skatina tyrimais pagrįstą mąstyseną, nepažeidžiant prieigos prie pagrindinės svetainės struktūros. Navigacija prisitaiko nesukeliant dezorientacijos, todėl naršymas išlieka tikslingas ir efektyvus.

Šaltinis: webflow.com

Šaltinis: webflow.com

Prognozuojamieji paieškos modeliai, kurie nukreipia vartotojus, kai jie rašo

Prognozuojama paieška padeda vartotojams greičiau pasiekti rezultatus, nes reaguoja realiuoju laiku. Kai žmonės įveda tekstą, sąsaja numato jų ketinimus ir pateikia pasiūlymus dar prieš jiems užbaigiant užklausą. Tai puikiai veikia svetainėse su dideliais katalogais, kur vien naršymas užtrunka pernelyg ilgai.

Šis modelis sumažina pastangas kritiniu momentu. Vartotojai dažnai žino dalį to, ko nori, bet ne tikslią formuluotę. Prognozuojama paieška užpildo tą spragą, iš karto siūlydama atitinkamus terminus, kategorijas ir produktus. Tai sumažina klaidų skaičių, sutrumpina kelią iki rezultatų ir išlaiko vartotojų susidomėjimą, užuot verčiant juos atlikti bandymų ir klaidų paiešką. Tai taip pat padeda atrasti galimybes, kurių vartotojai galbūt nebuvo apsvarstę.

Veiksmingas įgyvendinimas priklauso nuo aktualumo ir saiko. Per daug pasiūlymų sukelia sumaištį. Blogas reitingavimas mažina pasitikėjimą. Patirtis turėtų būti greita, tikslinga ir naudinga.

Kaip įgyvendinti prognozuojamą paiešką:

• Paiešką įdėkite ten, kur vartotojai jos tikisi, ir padarykite ją lengvai aktyvuojamą.
• Išplėskite paieškos lauką, kad būtų aiškiau, kur sutelktas dėmesys ir kokia yra paieškos intencija.
• Rodykite pasiūlymus po pirmųjų kelių simbolių.
• Rūšiuokite pasiūlymus pagal populiarumą ir aktualumą.
• Įtraukite kelis rezultatų tipus, pvz., produktus, kategorijas ir turinį.
• Rezultatuose aiškiai išskirkite atitinkančius terminus.
• Užtikrinkite, kad rezultatai būtų lengvai peržiūrimi, naudodami tarpelius ir vizualinę hierarchiją.
• Apriboti matomų rezultatų skaičių, kad išvengtumėte perkrovos.
• Užtikrinkite, kad veikimas visose įrangose būtų momentinis.

„Petco“, parduodanti gyvūnų ėdalą, skanėstus, reikmenis ir aksesuarus, taiko prognozuojamą paiešką dideliu mastu. Jos pagrindinėje navigacijoje yra matoma paieškos juosta, kuri išsiskleidžia, kai vartotojai ją paspaudžia.

Vartotojams įvedant tekstą, sąsaja numato užklausas ir rodo susijusius paieškos terminus, prekės ženklus ir kategorijas. Ji taip pat rodo produktų rezultatus ir susijusius straipsnius tame pačiame išsiskleidžiančiame lange. Vartotojai gali pereiti nuo idėjos prie veiksmo, nepalikdami paieškos būsenos.

Ši konfigūracija palaiko tiek greitus pirkimus, tiek platesnius tyrimus, tuo pačiu išlaikydama patirtį sutelktą ir reaguojančią.

Šaltinis: petco.com

Paskutinės mintys

Išmanioji navigacija pašalina pastangas, nesukeldama dėmesio sau. Čia aptarti modeliai veikia, nes jie atsižvelgia į tai, kaip žmonės naršo, priima sprendimus ir juda per turinį.

Nuolatiniai meniu palaiko pagreitį. Aiškios hierarchijos atitinka lūkesčius. Atributais pagrįsti keliai atspindi realų pirkimo elgesį. Kontekstinė navigacija prisitaiko prie tikslo. Prognozuojama paieška sutrumpina atstumą tarp poreikio ir rezultato.

Šie metodai yra sėkmingi, kai laikomasi disciplinos. Kiekvienas modelis tarnauja konkrečiam tikslui ir pasirodo tik ten, kur suteikia pridėtinės vertės.

Tolimesniems veiksmams peržiūrėkite, kaip vartotojai juda jūsų svetainėje. Nustatykite, kur jie dvejoja, grįžta atgal arba išeina. Tada pritaikykite modelį, kuris tinka tam momentui kelionėje. Nedideli navigacijos patobulinimai dažnai duoda didžiulę naudą įsitraukimui ir konversijai.