A márkák intelligens UX mintákat használnak, hogy a navigáció könnyednek tűnjön

Bevezetés

A rossz navigáció több weboldalt tesz tönkre, mint a rossz dizájn valaha is. Ha a felhasználók nem tudják, hova kattintsanak tovább, elhagyják az oldalt.

Kutatások szerint az emberek 61,5%-a azért hagyja el a weboldalakat, mert a navigáció zavaros számukra. Ez hatalmas szám, és azt jelenti, hogy a legtöbb weboldal elveszíti a látogatóit, mielőtt esélyük lenne őket konvertálni.

Azok a márkák, amelyek ezt jól csinálják, nem támaszkodnak ravasz trükkökre vagy szokatlan menükre. Speciális UX-mintákat használnak, amelyek minden interakcióból eltávolítják a súrlódásokat. Ezek a minták tudatos döntések arról, hogyan szervezik és prezentálják az információkat.

Több tucat jól teljesítő weboldalt tanulmányoztunk, hogy meghatározzuk, mi működik valójában. Az alábbiakban bemutatott minták különböző iparágakban, az e-kereskedelemtől a SaaS platformokig megjelennek. Mindegyik egy konkrét navigációs problémát old meg, és a teljes weboldal átalakítása nélkül is bevezethetők.

Vessünk egy pillantást arra, hogy a valódi márkák mit tettek, és hogyan alkalmazhatja Ön is a megközelítésüket.

A rögzített navigáció mint lendületet megőrző minta

A ragadó navigáció a felhasználók görgetése közben is láthatóvá teszi a fontos opciókat. Ezzel eltűnteti a súrlódást azokban a pillanatokban, amikor az emberek eldöntik, mit tegyenek tovább.

Hosszú oldalakon ez nagyon fontos. A felhasználók gyakran az olvasás közben alakítják ki szándékukat. A folyamatos navigáció lehetővé teszi számukra, hogy azonnal cselekedjenek, anélkül, hogy elveszítenék a koncentrációjukat vagy visszacsúsznának az oldal tetejére.

Ez a minta tiszteletben tartja a lendületet. A felhasználóknak nem kell szünetet tartaniuk, átorientálódniuk vagy keresniük a vezérlőket. A webhely olyan gyorsan reagál, ahogyan gondolkodnak. Idővel ez bizalmat épít és csökkenti a lemorzsolódást, különösen azokon az oldalakon, amelyek oktatást, árazást és konverziós útvonalakat ötvöznek.

Az érték a kivitelezésen múlik. A ragadó navigációnak támogató jellegűnek kell lennie, nem dominánsnak. Rosszul kezelve helyet vesz el vagy elvonja a figyelmet a tartalomról. A tiszta megvalósítás hasznos és diszkrét marad.

Hogyan valósítsuk meg a ragadó navigációt:

• A menü tervezése előtt határozza meg annak egyetlen célját. Támogassa a leggyakoribb következő lépést.
• Korlátozza a linkeket csak a legfontosabb oldalakra, például a termékekre, az árakra, a kapcsolatfelvételre és a megrendelésre.
• Tartsa a magasságot kompaktnak és az oldalakon egységesnek.
• Gondoskodjon erős kontrasztról a menü és az oldal tartalma között, hogy görgetés közben is olvasható maradjon.
• Használjon egyszerű címkéket, amelyek megfelelnek a felhasználói szándéknak, ne pedig a belső terminológiának.
• Rögzítse a menü pozícióját, hogy elkerülje a görgetés közbeni remegést vagy átméretezést.
• Mobil eszközökön tesztelje a hüvelykujj elérhetőségét és a gombok közötti biztonságos távolságot.
• Gondosan mérlegelje a görgetési viselkedést. Ha a hely problémát jelent, görgetéskor rejtse el a menüt, és görgetéskor mutassa meg.
• Ellenőrizze a teljesítményre gyakorolt hatást, hogy a rögzített elem ne lassítsa a betöltést vagy a görgetést.

A Custom Sock Lab egy olyan márka, amely jól használja ezt a mintát. Egyedi zoknikat készítenek cégek, rendezvények, csapatok és egyéni ügyfelek számára.

Ragadós navigációjuk minden oldalon látható marad, még akkor is, ha lefelé görgetünk az oldal aljára. A stílusokat, anyagokat vagy rendelési részleteket böngésző felhasználók azonnal válthatnak útvonalat. A menü egyszerű és következetes marad, segítve a látogatókat az opciók között való navigálásban anélkül, hogy elveszítenék a fókuszt vagy a haladást.

Forrás: customsocklab.com

A felhasználói mentális modellekhez illeszkedő hierarchikus menüminták

A hierarchikus menük akkor működnek, ha tükrözik azt, ahogyan a felhasználók már eleve rendszerezik az információkat a fejükben.

Az emberek nem véletlenszerűen böngésznek. Nagyjából tudják, mit akarnak, és elvárják, hogy a kategóriák logikus sorrendben szűkítsék a választási lehetőségeket. A világos szegmentálás segít nekik előrehaladni anélkül, hogy minden kattintás után kétszer is meggondolnák magukat.

Ez a minta csökkenti a súrlódást azáltal, hogy korán megválaszolja a hallgatólagos kérdéseket. A felhasználók látják, hol vannak, mi található az egyes kategóriák alatt, és milyen mélyre juthatnak el. Ez a világosság lerövidíti a döntési időt és csökkenti a kilépési arányt, különösen a nagy készletekkel vagy műszaki termékekkel rendelkező webhelyeken. Emellett bizalmat is épít. Ha a kategóriák ismerősek, a felhasználók bíznak abban, hogy megtalálják, amire szükségük van.

Itt a kivitelezés a fontos. A rossz hierarchia zavart kelt, vagy arra kényszeríti a felhasználókat, hogy újra megtanulják a struktúrát. Az erős hierarchia első pillantásra nyilvánvaló.

Hogyan valósítsuk meg a hierarchikus menüket:

• Csoportosítsa az elemeket a felhasználói szándék, nem pedig a belső termék logika alapján.
• Korlátozza a legfelső szintű kategóriák számát egy kezelhető mennyiségre.
• Használjon egyszerű, leíró címkéket, amelyek megfelelnek a keresési nyelvnek.
• A legördüléskor vagy érintéskor késedelem nélkül jelenítsen meg alkategóriákat.
• Amennyiben lehetséges, tartsa a kategóriák mélységét alacsony szinten.
• Tartsa konzisztensnek a menük és az oldalsávok szerkezetét.
• Rendezze az elemeket relevancia szerint, ne ábécé sorrendben.
• Vizuális távolságot adjon hozzá a csoportok egyértelmű elválasztásához.
• Támogassa a kategóriákon belüli szűrést a gyorsabb leszűkítés érdekében.

A Golf Cart Tire Supply fegyelmezett módon alkalmazza ezt a megközelítést. Golfkocsi gumiabroncsokat, kerekeket és kapcsolódó kiegészítőket szállít karbantartáshoz és fejlesztéshez.

Főmenüjükben a termékkategóriák megjelennek, amikor az egérrel rájuk mutatunk, és azonnal megmutatják a termékeket vagy a világos alkategóriákat. A felhasználóknak nem kell vakon kattintgatniuk. A honlapon a bal oldali sáv megerősíti ugyanezt a struktúrát. A termékeket méret és típus szerint szegmentálja, segítve a látogatókat a választás gyors leszűkítésében.

Mindkét navigációs rendszer ugyanazt a logikát követi, ami előre jelezhetővé és hatékonnyá teszi a böngészést.

Forrás: golfcarttiresupply.com

Attribútum-vezérelt menütervezés, amely tükrözi, hogyan szűrik a vásárlók a termékeket

Az attribútumalapú menük a vásárlók számára legfontosabb részletek köré szervezik a navigációt. Ahelyett, hogy csak tág kategóriákkal vezetnének, ezek a menük korán megjelenítik az olyan attribútumokat, mint a típus, a szín, az anyag vagy a felhasználási eset.

Ez a navigációt igazítja az emberek tényleges vásárlási szokásaihoz, különösen akkor, ha a katalógusok első ránézésre nagyok vagy hasonlóak.

Ez a stratégia lerövidíti a döntési folyamatot. A vásárlók gyakran már a böngészés előtt tudják, hogy milyen fontos szempontok vannak számukra. Lehet, hogy a márkaneveknél vagy a kollekcióknál jobban érdeklik őket a méret, a célközönség vagy a megjelenés. Az attribútumalapú navigáció lehetővé teszi számukra, hogy ezeket a szempontokat előre megadják. Ez csökkenti a böngészési időt és a frusztrációt. Emellett segít a felhasználóknak abban, hogy úgy érezzék, ők irányítanak, ami növeli a bizalmat a választás során.

A sikerhez ez a megközelítés fókuszt és visszafogottságot igényel. A túl sok attribútum túlterheli a felhasználót, míg a rossz címkézés zavaró lehet. A cél a világosság, nem a teljesség.

Hogyan valósítsuk meg az attribútumalapú navigációt:

• Azonosítsa azokat a tulajdonságokat, amelyekre a felhasználók a leginkább támaszkodnak a termékek összehasonlításakor.
• Ellenőrizze ezeket az attribútumokat a keresési adatokkal és támogató kérdésekkel.
• Korlátozza a látható tulajdonságokat a legfontosabb döntési tényezőkre.
• Használjon egységes címkéket a menükben, szűrőkben és termékoldalakon.
• Rendezze a tulajdonságokat fontosság szerint, ne belső prioritás szerint.
• Lehetővé kell tenni a felhasználók számára, hogy a tulajdonságokat az eredmények visszaállítása nélkül kombinálhassák.
• Tartsa láthatóvá a kiválasztásokat, hogy a felhasználók megértsék az aktív szűrőket.
• Gondoskodjon arról, hogy a szűrők frissítése közben a teljesítmény gyors maradjon.
• Tükrözze az attribútumok logikáját a desktop és mobil elrendezésekben.

A Mannequin Mall, amely kirakatbábukat árul kiskereskedelmi és divatcégeknek, teljes navigációját a termékattribútumok köré építi.

A termékeket manöken típus, nemi megjelenés, korcsoport és szín szerint rendezi. Ez megfelel annak, ahogyan a vásárlók szűkítik a lehetőségeket, amikor a kirakatok követelményeivel vagy a márka szabványaival dolgoznak. A látogatók gyorsan szűrhetnek anélkül, hogy kitalálnák a kategóriák útvonalait.

A struktúra támogatja a gyors összehasonlítást, és segít a felhasználóknak kevesebb lépéssel eljutni a releváns termékekhez.

Forrás: mannequinmall.com

Lábléc navigáció másodlagos felfedezési mintaként

A lábléc navigáció támogatja azokat a felhasználókat, akik cselekvés nélkül elérik az oldal alját. Ekkor még mindig érdeklődnek, de nem tudják, hová menjenek tovább. A jól felépített lábléc irányt mutat nekik anélkül, hogy visszacsúsznának az oldal tetejére. Ez egy csendes biztonsági hálóként működik a további felfedezéshez.

Ez a minta azért segít, mert a görgetés gyakran értékelést jelez. A felhasználók elolvassák, összehasonlítják és megállnak az oldal végén. Ha a lábléc egyértelmű következő lépéseket kínál, akkor fenntartja a lendületet. Emellett olyan tartalmakat is megjelenít, amelyek nem tartoznak az elsődleges navigációba, például útmutatókat, összehasonlításokat vagy a bizalomra fókuszáló oldalakat. Ez javítja a felfedezhetőséget anélkül, hogy a főmenüt túlzsúfolná.

A kivitelezés a világosságtól és a struktúrától függ. A láblécnek szervezettnek és célszerűnek kell lennie. A túlterhelt láblécek lassítják a döntéshozatalt, és figyelmen kívül hagyják őket.

Hogyan tervezzünk hatékony lábléc navigációt:

• Csoportosítsa a linkeket céljuk szerint, például kutatás, összehasonlítás, támogatás és vállalati információk.
• Használjon rövid, leíró címkéket, amelyek egy pillantásra megmagyarázzák az értéket.
• A jogi vagy kevésbé érdekes linkek helyett a nagy hasznosságú oldalakat helyezze előtérbe.
• Tartsa konzisztensnek az oszlopok elrendezését az oldalakon.
• Vizuális távolságot adjon a csoportok közé a könnyebb áttekinthetőség érdekében.
• Kerülje a teljes főmenü finomítás nélküli másolását.
• Ha lehetséges, helyezzen el a tartalomhoz kapcsolódó kontextuális linkeket.
• Győződjön meg arról, hogy a linkek kisebb képernyőkön is olvashatók maradnak.
• Ellenőrizze a lábléc analitikáját, hogy meghatározza, mely linkek eredményeznek interakciót.

A Medical Alert Buyer’s Guide a lábléc navigációt praktikus tartalék rétegként használja. A webhely az idősek és gondozók számára készült orvosi riasztórendszerek áttekintésére és összehasonlítására összpontosít.

Amikor a felhasználók hosszú értékeléseket vagy összehasonlító tartalmakat görgetnek, a lábléc egyértelmű hozzáférést biztosít a kiegészítő oldalakhoz, például vásárlási útmutatókhoz, GYIK-hez és kapcsolattartási forrásokhoz.

Ez a szerkezet segít a látogatóknak a zökkenőmentes kutatás folytatásában. A lábléc nem terheli túl a felhasználót. Egyszerűen logikus következő lépéseket kínál, amikor a felhasználók eljutnak az oldal végére, és iránymutatásra van szükségük.

Forrás: medicalalertbuyersguide.org

A felhasználói úthoz alkalmazkodó kontextusfüggő navigáció

A kontextusfüggő navigáció a felhasználók helye és tevékenységük alapján változik. Ahelyett, hogy egy menü szolgálna minden helyzetben, a felület az intenció egyértelműbbé válásával alkalmazkodik. Ez biztosítja a navigáció relevanciáját, és megakadályozza, hogy a felhasználók olyan opciókat válogassanak, amelyek már nem alkalmazhatók.

A felhasználók igényei változnak, ahogy haladnak a webhelyen. A korai látogatások az orientációra és a bizalomra koncentrálnak. A mélyebb látogatások a tanulásra, az összehasonlításra vagy a feladat elvégzésére koncentrálnak. A kontextusérzékeny navigáció támogatja ezeket a változásokat azáltal, hogy a jelenlegi szakaszhoz illeszkedő linkeket jelenít meg. Ez csökkenti a figyelemelterelést és segít a felhasználóknak kevesebb erőfeszítéssel haladni előre.

Az előny a következetességtől függ. A hirtelen változások megzavarják a felhasználókat, ha a logika nem egyértelmű. A sikeres kontextusérzékeny navigáció természetesnek tűnik, mert a felhasználók által már ismert struktúrára épül.

Hogyan valósítsuk meg a kontextusérzékeny navigációt?

• Határozza meg a felhasználói útvonalakat, mielőtt megtervezi a navigációs állapotokat.
• Tartsa stabilnak a globális navigációt a legfelső szintű mozgáshoz.
• Csak akkor vezessen be kontextusfüggő menüket, ha a szándék szűkül.
• Használjon olyan elrendezés-változásokat, amelyek új tartalmi módot jeleznek.
• Korlátozza a kontextusfüggő linkeket az aktuális szakaszhoz kapcsolódó műveletekre.
• Tartsa konzisztensnek a globális és a helyi menük címkéit.
• Gondoskodjon arról, hogy a felhasználók könnyen visszatérhessenek a magasabb szintű oldalakra.
• Tesztelje az átmeneteket, hogy a navigáció változásai kiszámíthatóak legyenek.
• Kerülje a globális linkek duplikálását a kontextusfüggő menükben.

Ennek a stratégiának egyik legjobb példája a Webflow, egy vizuális fejlesztési platform, amely lehetővé teszi a tervezők számára, hogy kód írása nélkül professzionális weboldalakat készítsenek.

A kezdőlapon a menü tartalmazza a várható SaaS szakaszokat, mint például a Platform, Megoldások, Erőforrások és Árak. Amikor a felhasználók belépnek az Erőforrások területre, a navigáció átvált egy tanulásra szabott oldalsávra. A linkek a tanfolyamokra, szótárakra, tanúsítványokra és oktatási tartalmakra koncentrálnak.

Ez a változás támogatja a kutatásorientált gondolkodásmódot anélkül, hogy eltávolítaná a fő webhelyszerkezethez való hozzáférést. A navigáció alkalmazkodik anélkül, hogy zavaró lenne, így a böngészés célirányos és hatékony marad.

Forrás: webflow.com

Forrás: webflow.com

Prediktív keresési minták, amelyek irányítják a felhasználókat a gépelés során

A prediktív keresés valós időben reagál, így segít a felhasználóknak gyorsabban elérni az eredményeket. Amint a felhasználók gépelnek, a felület előre megjeleníti a szándékot, és javaslatokat kínál, még mielőtt befejeznék a keresést. Ez jól működik olyan webhelyeken, ahol nagy a kínálat, és a böngészés önmagában túl sok időt vesz igénybe.

Ez a minta csökkenti az erőfeszítést a kritikus pillanatban. A felhasználók gyakran tudják, hogy mit akarnak, de nem ismerik a pontos megfogalmazást. A prediktív keresés azonnal releváns kifejezéseket, kategóriákat és termékeket javasolva pótolja ezt a hiányosságot. Csökkenti a hibaarányt, lerövidíti az eredményekhez vezető utat, és fenntartja a felhasználók érdeklődését, ahelyett, hogy kényszerítené őket a próbálkozásos keresésre. Emellett támogatja a felfedezést is, olyan lehetőségeket kínálva, amelyeket a felhasználók esetleg nem vettek figyelembe.

A hatékony végrehajtás a relevancián és a visszafogottságon múlik. A túl sok javaslat zavaró. A rossz rangsorolás aláássa a bizalmat. Az élménynek gyorsnak, célzottnak és hasznosnak kell lennie.

Hogyan valósítsuk meg a prediktív keresést:

• Helyezze a keresőt oda, ahol a felhasználók elvárják, és tegye könnyen aktiválhatóvá.
• Bővítse a keresőmezőt, hogy jelezze a fókuszt és a szándékot.
• Az első néhány karakter beírása után mutassa meg a javaslatokat.
• Rendezze a javaslatokat népszerűség és relevancia szerint.
• Többféle eredménytípust is vegyen fel, például termékeket, kategóriákat és tartalmakat.
• Jelölje ki egyértelműen az eredmények között a megfelelő kifejezéseket.
• Tartsa az eredményeket áttekinthetővé szóközökkel és vizuális hierarchiával.
• Korlátozza a látható eredmények számát, hogy elkerülje a túlterhelést.
• Gondoskodjon arról, hogy a teljesítmény minden eszközön azonnali maradjon.

A Petco, amely állateledeleket, finomságokat, kellékeket és kiegészítőket árul, nagymértékben alkalmazza a prediktív keresést. Fő navigációs sávjukon egy jól látható keresősáv található, amely kibővül, amint a felhasználók rákattintanak.

Ahogy a felhasználók gépelnek, a felület megjósolja a keresési kifejezéseket, és megjeleníti a kapcsolódó keresési kifejezéseket, márkákat és kategóriákat. Ugyanebben a kibővített ablakban a termékek eredményeit és a kapcsolódó cikkeket is megjeleníti. A felhasználók a keresési állapot elhagyása nélkül léphetnek át az ötlettől a cselekvésig.

Ez a beállítás támogatja mind a gyors vásárlást, mind a szélesebb körű kutatást, miközben az élmény fókuszált és reagáló marad.

Forrás: petco.com

Záró gondolatok

Az intelligens navigáció megkönnyíti a munkát anélkül, hogy magára vonná a figyelmet. Az itt bemutatott minták azért működnek, mert tiszteletben tartják, ahogyan az emberek böngésznek, döntéseket hoznak és mozognak a tartalomban.

A tartós menük támogatják a lendületet. A világos hierarchiák megfelelnek az elvárásoknak. Az attribútumalapú útvonalak tükrözik a valós vásárlási magatartást. A kontextusfüggő navigáció alkalmazkodik a szándék pontosulásához. A prediktív keresés lerövidíti a távolságot a szükséglet és az eredmény között.

Ezek a megközelítések akkor sikeresek, ha fegyelmezettek maradnak. Minden minta egy adott célt szolgál, és csak ott jelenik meg, ahol hozzáadott értéket jelent.

A következő lépésekhez vizsgálja meg, hogyan mozognak a felhasználók a webhelyén. Azonosítsa, hol haboznak, hol térnek vissza, vagy hol távoznak. Ezután alkalmazza azt a mintát, amely illeszkedik az adott pillanathoz az utazás során. A navigáció apró javításai gyakran hatalmas eredményeket hoznak az elkötelezettség és a konverzió terén.