Užitočná navigácia Ako ovplyvňuje dizajn používateľského zážitku

Na vytvorenie efektívnej a užívateľsky prívetivej navigácie nie je potrebné len premýšľať o tom, ako zoskupte náš obsah do dobre štruktúrovaných ponúk aby mohli používatelia ľahko nájsť to, čo chcú, ale aj to, ako navrhnúť nástroje, ktoré budú musieť interagovať s webom

Navigácia, ktorá nie je prísne spojená s obsahom a pomáha používateľom vykonávať rôzne akcie, sa nazýva navigácia pomocou služby, a je to menej diskutovaný, ale veľmi dôležitý aspekt dizajnu používateľských skúseností. Vyhľadávacie panely, prihlasovacie a registračné formuláre, tlačidlá na prihlásenie na odber, zdieľanie a tlač, nákupné vozíky, kontextové ponuky a nástroje, ktoré umožňujú používateľom zmeniť jazyky alebo veľkosť písma, sú typickými príkladmi navigácie.

Navrhovanie ich nie je tak jednoduché, ako sa zdá na prvý pohľad vyžaduje zváženie, aby sme zistili, aké prvky potrebujeme, kde umiestniť a ako ich zobraziť aby sme sa uistili, že naši návštevníci ich môžu rýchlo nájsť a pochopiť, ako fungujú.

Ako ovplyvňuje obsluhu navigácie UX

Keď navrhujeme utilitnú navigáciu, musíme rozhodnúť, ako chceme, aby naši používatelia komunikovali s našimi stránkami. Musíme im poskytnúť interaktívna štruktúra ktorá zodpovedá našim obchodným cieľom, vedie používateľov cestou zákazníkov, poskytuje im ľahko pochopiteľné možnosti a poskytuje im príjemnú používateľskú skúsenosť.

Po prvé, musia byť schopní rýchlo vykonať akcie, ktoré chcú. Ak im to umožníme, spokojnosť zákazníkov porastie a spokojní používatelia majú tendenciu tráviť viac času a viac peňazí na webových stránkach.

Domovská stránka AirBnB sa riadi týmto princípom UX a jeho horná ponuka obsahuje iba nástroje. Nie je to obvyklé riešenie, ale ak sa pozrieme na neuveriteľnú mieru rastu AirBnB, je to pre nich ideálna voľba.

4 položky najvyššej ponuky sú zamerané na 4 hlavné osoby, ktoré zvyčajne navštívia stránku spoločnosti AirBnB: ľudia, ktorí majú záujem stať sa hostiteľom (“Staňte sa hostiteľom”), ľudia, ktorí chcú vyriešiť problém, ktorý sa vyskytol počas používania služby (“Pomoc”), nových a vracajúcich sa používateľov (“Prihlásiť Se” a “Prihlásiť sa”). AirBnB je zameraná na úžitkovú domovskú stránku tiež obsahuje rýchly vyhľadávací panel, ktorý je rozhodujúcim nástrojom na webových stránkach prenajímajúcich ubytovanie.

za druhé, používatelia nepotrebujú zbytočné pomôcky, pretože príliš veľa neporiadku odvádza pozornosť a znižuje zameranie. Aké nástroje sú potrebné v našej obslužnej navigácii a čo nezávisí od charakteru našej stránky. Napríklad môže byť užitočné zahrnúť zobrazenie pre tlač na blog alebo na spravodajskú stránku, ale rovnaká funkcia môže byť zbytočné rozptýlenie na fóre alebo webovej stránke sociálnych médií.

Služba Washington Post napríklad zobrazuje navigáciu na svojich stránkach s jednotlivými príspevkami inak než na domovskej stránke. Týmto spôsobom sa používatelia stretávajú iba s nástrojmi, ktoré sú relevantné a nie sú prekážkou s možnosťami, ktoré by nechceli používať.

K dispozícii sú 3 položky navigačných nástrojov, ktoré návštevníci môžu používať na celom webe. Tieto sú inteligentne zahrnuté v pevnom hornom paneli (vyhľadávací nástroj, “Prihlásiť sa”, a “predplatiť”), ale používatelia nemusia myslieť na možnosti týkajúce sa jednotlivých príspevkov, ako napríklad “Zoznam čítaní” pri prehliadaní domovskej stránky alebo jednej zo stránok kategórie.

za tretie, používatelia musia rýchlo pochopiť, čo môžu robiť na našich stránkach. Návštevníci nemusia nevyhnutne vedieť, čo chcú, a preto im vždy potrebujeme poskytnúť informácie o možnostiach, ktoré majú.

Ak sa pozriete na snímku nižšie, môžete vidieť, že The New York Times informuje používateľov o dostupnosti troch rôznych verzií: americký, medzinárodný, a čínsky, a tiež im umožňuje rýchlo prepínať medzi troma. Tento skvelý príklad inteligentnej navigácie pomôcok ukáže užívateľom menej zrejmé možnosti, ktoré pravdepodobne nenašli samy osebe, a to neprístupným a elegantným spôsobom.

Nájdi najlepšie miesto

Existujú typické umiestnenia pre navigáciu s nástrojmi, kde používatelia intuitívne hľadajú tieto nástroje, na čo si zvykli na väčšine webových stránok. Rozbíjanie konvencií webového dizajnu je považované za zlé praktické skúsenosti používateľov a je to najmä v prípade navigácie v aplikáciách, ktorá vo väčšine prípadov súvisí skôr s použiteľnosťou ako s kreativitou.

Keďže obsluha navigácie je druhoradá vo väčšine webových stránok, je často umiestnená na menej prominentných, ale stále viditeľných oblastiach. To zvyčajne znamená (1) pravý horný roh webových stránok a (2) spodnú časť päty. to je dobrý nápad dodržiavať tieto dohovory, ako to sú miesta, kde najčastejšie používatelia hľadajú nástroje.

Ako vidíte nižšie, spoločnosť Reuters umiestnila väčšinu svojich nástrojov do týchto dvoch typických oblastí, v pravom hornom rohu stránky a spodnej časti päty pod obsahovou navigáciou. Jedinečným riešením je fixná extra päta s 2 úžitkovými prvkami, o ktorých dizajnéri považujú za najdôležitejšie: “Prihlásiť sa alebo zaregistrovať” a “Najnovšie z mojej siete”.

Je zaujímavé poznamenať, že oblasť navigácie s extra technológiou je stále umiestnená do päty, kde by používatelia normálne hľadali podobné nástroje, takže návrhári Reuters boli tvorivým spôsobom ale stále dodržiavali konvencie webového dizajnu na zachovanie použiteľnosti.

Vytvorte logickú štruktúru

Zoskupenie nástrojov do logickej štruktúry je kľúčové, ak chceme vytvoriť stránky s vysokou mierou konverzie. To môže byť výzvou, aj keď nechceme používateľom poskytnúť veľa možností, ale Amazon preberá zložitosť obslužnej navigácie na ďalšiu úroveň. Amazon má neuveriteľne komplikovanú utilitnú navigáciu s mnohými možnosťami, ale ak používame Amazon pravidelne dosť, nezdá sa to tak. Toto je kúzlo inteligentného dizajnu.

V pravom hornom rohu navigačnú službu neumiestňovali iba používateľov, ale používatelia ju tiež rozdelili do troch hlavných skupín: (1) vyhľadávací panel, (2) informácie týkajúce sa používateľa (pod vyhľadávacím pruhom ) a (3) akcie, ktoré môžu používatelia vykonávať na webe.

Je to chytré, pretože vďaka vizuálnym nápadom, ako je nákupný košík alebo ikona vyhľadávania, sa zákazníci môžu rozhodnúť v okamihu oka, ktorú skupinu chcú použiť, a odteraz môžu ignorovať ďalšie dve. Existuje iba jedna skupina (“Váš účet”, “Vyskúšajte Prime”, “košík”, a “Zoznam prianí”), ktoré má tiež submenu, ktoré sú tiež logicky štruktúrované a rôzne skupiny submenu sú rozdelené diskrétnymi, ale viditeľnými oddeľovačmi, ktoré pomáhajú používateľom rýchlo nájsť to, čo chcú.

Vytvorte efektívny vizuálny dizajn

Vizuálny dizajn efektívnej obslužnej navigácie sa musí riadiť slávnym princípom KISS (Keep It Simple, Stupid). Odporúčame poskytovať ikony s textovými štítkami, robiť kontroly ako kontrolné prvky a vizuálne zdôrazňovať najdôležitejšie akcie. Môže byť tiež dobrý nápad rozlišovať navigáciu založenú na utilitách a obsahu pomocou trochu iného dizajnu.

Dva skvelé príklady efektívneho vizuálneho dizajnu možno nájsť na webových stránkach spoločnosti Walmart a Etsy. Dizajnéri umiestnili obslužnú navigáciu na najvyššiu časť obidvoch stránok a zvýraznili ju farbami, ktoré sa líšia od zvyšku navigácie, Walmart s modrým pozadím a Etsy s modrými písmenami.

Obidve miesta zdôrazniť najdôležitejšie akcie používateľov s rôznymi prvkami vizuálneho dizajnu, Walmart používa žlté tlačidlá pre vyhľadávanie a prihlasovanie, zatiaľ čo Etsy dáva diskrétne modré okraje k tlačidlu Prihlásiť a obsahuje šedú ikonu nákupného košíka nad ponukou košíka.

Toto je jediné miesto, kde Etsy používa ikonu vo svojom menu, zatiaľ čo Walmart zobrazí ikonu vedľa každej položky, ale stále nezabudne zahrnúť potrebné textové štítky hneď vedľa ikon.