Navrhovanie víťazného navigačného menu Nápady a inšpirácie

Navigačné menu na webe je ako dopravná značka na ulici alebo na úrovni adresára v nákupnom stredisku. Nemôžete sa dostať do cieľa bez toho, aby ste vedeli, kde ste. Rovnako ako v reálnom živote, navigácia v webovom dizajne je veľmi dôležitá a zohráva významnú úlohu v použiteľnosti webových stránok, ako aj v používateľskej skúsenosti.

V súčasnosti môžete vidieť veľa rôznych druhov navigačných ponúk so zaujímavými, kreatívnymi a neobvyklými návrhmi. Ale čo sa týka efektívnej navigácie na webových stránkach, ako by to vyzeralo; ako by to malo vyzerať?

Dnes by som sa chcel podeliť o moje pozorovania a vedomosti o dôležitosti navigácie v webovom dizajne. Odhalím niekoľko jednoduchých tipov, ktoré môžete použiť na zlepšenie navigácie a použiteľnosti webových stránok. Bude tiež niekoľko príkladov efektívnych navigačných ponúk, ktoré vám poskytnú nejakú predstavu o tom, ako plánovať svoj ďalší dizajn.

Informačná architektúra

Plánovanie navigácie by malo začať s informačnou architektúrou. Je nevyhnutné sedieť a brainstorming o informačnej architektúre webových stránok. Musíte zistiť, aké funkcie ponúka webová stránka, čo je najdôležitejšie a čo možno umiestniť do nižších úrovní v informačnej hierarchii.

Informačná architektúra zahŕňa funkcií, potrieb používateľov, súboru stránok, testovania a drôtových rámcov. Ďalšie informácie o architektúre informácií nájdete v článku od Camerona Chapmana v Informačnej architektúre 101: Techniky a najlepšie postupy.

Používanie používateľských technológií

Nepoužívajte Flash, JavaScript, jQuery alebo čokoľvek iného, čo by mohlo zabrániť prístupu k navigácii vášho webu pri vytváraní navigačného panela, alebo prinajmenšom uistite sa, že sú schopní elegantne degradovať.

Ďalšie odkazy na ladné zhoršenie javascriptu, pozrite si tento príspevok na 10 užitočných metódach Fallback pre CSS a Javascript.

Používajte jednoduché a užívateľsky príjemné pojmy

Je lepšie použiť jednoduché, zrejmé a pojmy, ktoré sa dajú ľahko zistiť než aby ste dodržiavali iba podmienky týkajúce sa vášho navigačného menu. Akýkoľvek odkaz, ktorý používateľov zaberá viac ako jednu sekundu alebo dve, aby sa zistilo, je pravdepodobne nevhodný na použitie.

Ak používateľ potrebuje kliknúť na odkaz a zistiť, čo vedie k odkazu, potom to prispeje k zlej užívateľskej skúsenosti pre vašich návštevníkov.

Príklady

Termíny v navigačnom menu stránky Larissa Ness sú ľahko pochopiteľné a dostatočne spoločné. Používatelia to nenašli matou, pretože už majú skúsenosti s takýmito menuami.

Tu je ďalší dobrý príklad čistého a jasného navigačného menu webových stránok s bežnými výrazmi používanými v csupport.

Kreatívna agentúra Eighty8Four používa termín "showroom", ktorý môže byť pre návštevníkov mätúci. Tento termín by mohol znamenať portfólio alebo prácu, ale nie je jasné a návštevníci nemajú inú možnosť, ako kliknúť a skontrolovať.

Štandardizujte návrh navigácie

Použite rovnaký navigačný model na všetkých vašich stránkach. Je to veľmi dôležité, pretože bez konzistentného návrhu môže používateľ skutočne myslieť, že je na inej webovej stránke. Uistite sa, že používate rovnaký navigačný model, aby používatelia mohli ľahko prejsť na vašu webovú lokalitu bez straty.

Bluegg, zobrazený nižšie, používa jednoduchý a čistý navigačný dizajn, ktorý zostáva rovnaký vo všetkých podstránkach. Jediný rozdiel je indikátor farby, ktorý zobrazuje stránku, na ktorej je návštevník v súčasnosti.

Uveďte, kde ste

Je dôležité nechať používateľovi vedieť, kde je vždy. Môžete to urobiť zmena pozadia odkazu, farba názvu stránky alebo otočte text tučným písmom v navigačnom menu, aby ste sa odlišovali od ostatných.

Austin Eastciders používa inú farbu a pozadie na označenie stránky, na ktorej je používateľ zapnutý. Tento indikátor môže fungovať aj ako jemná zmena konštrukcie, napríklad použitím a rôzne navigačné pozadie čo vytvára pocit, že ďalšie položky menu sú hlbšie.

Mediálna chirurgia používa tmavšiu farbu ako indikátor otvorenej podstránky. Jednoduché, ale účinné.

Použite webové konvencie

Je to všetko o ľahko použiteľnej a intuitívnej navigácii na webe. Webové konvencie robia dizajnérom oveľa jednoduchšie spracovať ich návrhy. Väčšina používateľov klikne na logo webových stránok, aby sa dostala späť na domovskú stránku. Preto navrhnite svoje logo.

Ak nemáte, robíte im tráviť čas naučiť sa niečo nové alebo v niektorých prípadoch spôsobujú nepríjemnosti tým, že neposkytujú to, čo očakávajú, že budú bežne akceptované navigačné normy.

Viac informácií o webových konvenciách nájdete tu:

10 konvencií webového dizajnu
Neinvestujte koleso webového dizajnu
Návrh s webovými konvenciami

Injektovanie dizajnu umiestňuje logo v ľavom hornom rohu, ktoré dnes vyhovuje jednému z najčastejšie používaných webových konvencií.

Adamsova tvorba používa jednu z najbežnejších konvencií webových stránok - logo sa nachádza v ľavom hornom rohu stránky a odkazuje na domovskú stránku.

Vyskúšajte to: Zapojte tretiu stranu

Vždy skúste svoj navigačný dizajn s ľubovoľnou osobou, ktorá už predtým používala internet. Možno budete chcieť priniesť ľuďom, ktorí nesúviseli s procesom návrhu, aby ich otestovali. Pri ich navigácii dodržujte ich predvoľby prostredníctvom svojej stránky a analyzovať čas, ktorý potrebuje, aby našli stránky, na ktoré hľadali.

Pre lepšiu presnosť, zapojiť viac ľudí, zhromažďovať údaje, analyzovať a zhrnúť pre lepšie prispôsobenie. Vykonajte prieskum po teste, ak je to potrebné. Môžete dostať nejaké nečakané nápady a vstupy, ktoré by inak neskontrolovali bez tohto testovacieho postupu.

Zadajte kontext

Ak chcete byť v súlade s vaším obsahom a navigáciou, poskytnite používateľom webových stránok nejaký kontext, aby rýchlo našli veci, ktoré potrebujú. Môžete umiestniť malé ikony súvisiace s obsahom, na ktorý odkazujete, alebo s krátkymi popismi, aby ste poskytli prehľad o stránke.

Môj vlastný bicykel používa jednoduché ikony, ktoré používateľom poskytujú viac informácií o tom, čo môžu nájsť v určitej podstránke.

Sarah Parmenter používa krátke a pekné titulky pod hlavnou navigáciou, aby poskytol nejaké informácie o podstránkach, ku ktorým smeruje hlavná navigácia.

SEO účely

Google páči konzistentnú navigáciu. Je dobré mať konzistentnú navigáciu nielen pre používateľov, ktorí chápu a získajú predstavu o tom, ako navigovať na vašich webových stránkach, ale aj pre vyhľadávače na indexovanie vašich webových stránok.

Roboti vyhľadávacích strojov budú prehľadávať vaše webové stránky, aby indexovali vaše webové stránky a vložili ich na stránku s výsledkami vyhľadávačov. Ak chcete byť viditeľní, dávajte pozor na dobrý dizajn navigácie a získajte väčšiu návštevnosť.

Voľné navigačné skripty (CSS a jQuery)

Tu je krátky zoznam najnovších navigačných ponúk, ktoré vám môžu byť užitočné pre vaše projekty. Tieto skripty budú ešte lepšie vylepšovať používateľov vášho produktu pridaním niektorých pekných funkcií a potešením ich používania.

XML-riadené vertikálne News Scroller Script pomocou HTML a jQuery: vScroller

Filtrify

Page Scroller

Portfólio časovej osi

HorizontalNav

CSS3 minimalistická navigačná ponuka

Kruhový navigačný efekt s CSS3

Gridové navigačné efekty s jQuery

Ascensor

Vytvorte elegantnú navigačnú ponuku CSS3

Ukážka krásnej horizontálnej navigácie

A v neposlednom rade niektoré inšpiratívne horizontálne navigačné menu. Skontrolujte tieto úžasné webové stránky a ich riešenia navigačného menu a nájdite nové nápady pre vaše projekty.

Ch3mical