Segédprogram navigáció Hogyan befolyásolja a felhasználói élményt

Ahhoz, hogy hatékony és felhasználóbarát navigációt tervezzünk, nem csak azt kell gondolnunk, hogy hogyan csoportosítsa a tartalmát jól strukturált menükbe hogy lehetővé tegyék a felhasználók számára, hogy könnyen megtalálják, amit akarnak, hanem arról is, hogy hogyan tervezze meg azokat az eszközöket, amelyekre szükségük van ahhoz, hogy kölcsönhatásba

A navigáció, amely nem szorosan kapcsolódik a tartalomhoz, és segít a felhasználóknak különböző műveletek végrehajtásában, hívásra kerül segédprogram navigáció, és ez egy kevésbé megvitatott, de rendkívül fontos szempont a felhasználói élmény kialakításában. A sávok, a bejelentkezési és a regisztrációs űrlapok, a feliratkozás, a megosztási és nyomtatási gombok, a bevásárlókocsik, a kontextusos menük és az eszközök, amelyek lehetővé teszik a felhasználók számára a nyelvek vagy betűméret megváltoztatását, tipikus példája a segédprogram navigáció.

Ezek megtervezése nem olyan egyszerű, mint amilyennek látszik első látásra meg kell vizsgálni, hogy milyen elemek szükségesek, hová helyezzük el és hogyan kell megjeleníteni őket annak biztosítása, hogy látogatóink gyorsan megtalálják és megértsék, hogyan működnek.

A segédprogram navigációs hatásai UX

Amikor tervezzük a segédprogram navigációt, el kell döntenünk, hogyan szeretnénk, hogy felhasználóink ​​interakcióba lépjenek a webhelyünkkel. Biztosítanunk kell nekik interakciós struktúra amely megfelel az üzleti céljainknak, az ügyfelek útján vezet a felhasználókhoz, könnyen érthető lehetőségeket ad nekik, és kellemes felhasználói élményt nyújt számukra.

Először is, képesnek kell lenniük arra, hogy gyorsan végrehajtsák a kívánt intézkedéseket. Ha lehetővé teszik számukra, hogy az ügyfelek elégedettsége növekedni fog, és a felhasználók szívesen töltenek több időt és több pénzt a weboldalakon.

Az AirBnB honlapja követi ezt az UX elvet, és felső menüje csak segédprogramokat tartalmaz. Ez nem szokásos megoldás, de ha megnézzük az AirBnB hihetetlen növekedési ütemét, akkor ez a tökéletes választás számukra.

A 4 fő menüpont a 4 fő személyre irányul, akik általában látogatják az AirBnB webhelyét: az emberek, akiket érdeklődnek a fogadóhelyre (“Legyél Host”) olyan emberek, akik olyan problémát szeretnének megoldani, amely a szolgáltatás \ t“Segítség”), új és visszatérő felhasználók (“Regisztrálj” és “Belépés”). Az AirBnB segédközpontú kezdőlapja tartalmaz továbbá egy gyors keresősávot is, amely egy kulcsfontosságú eszköz egy szálláskölcsönzés weboldalán.

Másodszor, a felhasználóknak nincs szükségük felesleges segédprogramokra, mivel a túl sok rendetlenség elvonja a figyelmet és csökkenti a fókuszt. Milyen eszközök szükségesek a közüzemi navigációnkban, és mi nem függnek webhelyünk jellegétől. Például hasznos lehet egy nyomtatási nézet felvétele egy blogra vagy egy híroldalra, de ugyanaz a funkció szükségtelenül zavarhatja a fórumot vagy a szociális média webhelyét.

A Washington Post például a honlapon eltérő módon jeleníti meg a közüzemi navigációt egyetlen posztoldalán. Ily módon a felhasználók csak a releváns segédeszközökkel találkoznak, és nem állnak rendelkezésre olyan lehetőségekkel, amelyeket egyébként nem akarnak használni.

Három hasznos navigációs elem létezik, amelyeket a látogatók a webhelyre kiterjedően használhatnak. Ezek okosan szerepelnek a rögzített felső sávban (keresési eszköz, “Bejelentkezés”, és “Iratkozz fel”), de a felhasználóknak nem kell gondolkodniuk az egyes bejegyzésekhez kapcsolódó lehetőségekről, mint például “Olvasási lista” amikor a kezdőlapot vagy a kategóriák egyikét böngészik.

Harmadszor, a felhasználóknak gyorsan meg kell érteniük, mit tehetnek a honlapunkon. A látogatók nem feltétlenül tudják, mit akarnak, ezért mindig tájékoztatnunk kell őket az általuk választott lehetőségekről.

Ha megnézed az alábbi képernyőt, láthatod, hogy a The New York Times tájékoztatja a felhasználókat 3 különböző kiadás elérhetőségéről: Amerikai, Nemzetközi, és kínai, és lehetővé teszi számukra is gyorsan válthat a három között. Az intelligens segédprogramok navigációjának nagyszerű példája a felhasználók kevésbé nyilvánvaló lehetőségeit mutatja, amelyeket valószínűleg nem találnak önmagukban, nem obstrusív és elegáns módon.

Keresse meg a legjobb helyet

A közüzemi navigációnak tipikus elhelyezése van, ahol a felhasználók intuitívan keresik ezeket az eszközöket, mivel ez az, amit megszoktak a legtöbb webhelyen. A webes tervezési szabályok megsértése rossz felhasználói élménynek tekinthető, és különösen igaz a közüzemi navigációra, amely a legtöbb esetben inkább a használhatóságra, mint a kreativitásra vonatkozik..

Mivel a legtöbb webhelyen a közüzemi navigáció másodlagos a tartalom alapú navigációhoz, gyakran helyezkednek el a kevésbé kiemelkedő, de még mindig látható területeken. Ez általában a weboldalak (1) jobb felső sarkát és a lábléc (2) alsó részét jelenti. ez jó ötlet, hogy kövesse ezeket az egyezményeket, mint ezek azok a helyek, ahol a legtöbb felhasználó először a segédprogramokat keresi.

Amint az alábbiakban láthatod, a Reuters segédprogramjainak többségét ezen a két tipikus területen helyezte el, a webhely jobb felső sarkában, és a lábléc alsó részét a tartalom alapú navigáció alatt. Az egyedülálló megoldás itt a rögzített extra lábléc, 2 segédeszközzel, amelyeket a tervezők a legfontosabbnak tartottak: “Bejelentkezés vagy regisztráció” és “Legfrissebb a Wire-ről”.

Érdekes megjegyezni, hogy az extra közüzemi navigációs terület még mindig olyan láblécbe kerül, ahol a felhasználók általában hasonló eszközöket keresnek, így a Reuters tervezői voltak. kreatív módon de továbbra is a webes tervezési szabályokat követte a használhatóság fenntartása érdekében.

Logikai felépítés

A segédeszközök logikai struktúrába történő csoportosítása kulcsfontosságú, ha magas konverziós arányú webhelyet akarunk építeni. Ez akkor is kihívást jelenthet, ha nem szeretnénk sok lehetőséget nyújtani a felhasználóknak, de az Amazon a közüzemi navigáció összetettségét a következő szintre emeli. Az Amazon hihetetlenül bonyolult segédprogram-navigációt kínál sok lehetőséggel, de ha az Amazonot eléggé rendszeresen használjuk, akkor nem jelenik meg. Ez az intelligens tervezés varázslata.

Nem csak a jobb felső sarokban helyezték el a segédprogramot, ha a felhasználók azt várják, hogy találják meg, de három fő csoportra is osztották: (1) egy keresősáv, (2) a felhasználóval kapcsolatos információk (a keresősáv alatt) ), és (3) olyan intézkedéseket, amelyeket a felhasználók a helyszínen végezhetnek.

Ez okos, mert a vizuális jelzéseknek, mint például a bevásárlókosárnak vagy a keresési ikonnak köszönhetően, az ügyfelek dönthetnek arról, hogy egy szem melyik csoportját akarják használni, és ettől kezdve figyelmen kívül hagyhatják a másik kettőt. Csak egy csoport van (“Fiókja”, “Próbáld meg a Prime-t”, “Kosár”, és “Kívánság lista”), amelyek logikai struktúrájú almenükkel rendelkeznek, és a különböző almenük csoportjai diszkrét, de látható elválasztókkal vannak osztva, hogy a felhasználók gyorsan megtalálják azt, amit akarnak.

Hozzon létre egy hatékony vizuális tervezést

A hatékony közüzemi navigáció vizuális tervezésének követnie kell a híres KISS elvet (Keep It Simple, Stupid). Javasoljuk, hogy szöveges címkékkel ellátott ikonok legyenek, vezérlőknek látszanak, és vizuálisan hangsúlyozzák a legfontosabb műveleteket. Jó ötlet lehet a közüzemi és a tartalom alapú navigáció megkülönböztetése is egy kissé eltérő design használatával.

A hatékony vizuális tervezés két nagyszerű példája megtalálható a Walmart és Etsy weboldalán. A tervezők mindkét helyszínen helyezték el a segédprogramot, és kiemelték azt a színekkel, amelyek a navigáció többi részétől, a kék háttérrel rendelkező Walmarttól és a kék betűtípusú Etsy-től változnak.

Mindkét oldal hangsúlyozzák a legfontosabb felhasználói akciókat különböző vizuális tervezési elemekkel, A Walmart a Search és a Sign In gombokhoz sárga színt használ, míg Etsy diszkrét kék szegélyt ad a Bejelentkezés gombra, és egy szürke bevásárlókosár ikont tartalmaz a Kosár menü felett.

Ez az egyetlen hely, ahol Etsy használ egy ikont a segédprogram menüjében, míg a Walmart minden elem mellett egy ikont jelenít meg, de még mindig nem felejti el a szükséges szövegcímkéket az ikonok mellett.