Navrhování navigace webových stránek je jako položení základů pro váš dům. Pokud byste správně neplánovali svoji nadaci, mohla by vaše stavba ohrožena kolapsem, bez ohledu na to, jak hezké to vypadá. Chcete-li těžit z nejlepších možných prodejů nebo konverzí z vašeho webu, potřebujete věnovat čas plánováním toho, jak bude vaše publikum interagovat s vaším obsahem, a zjistit nejinteligentnější způsob organizace a zastupování.

Vždy si pamatujte, jestli máte tuto část špatně, riskujete odcizení velké části publika.

Co je navigace?

Existuje více než jeden způsob, jak se podívat na navigaci. Dalo by se říci, že je to váš ústřední prvek na vašich webových stránkách, který umožňuje svým zákazníkům najít to, co hledají, bez záměny nebo zbytečných kliknutí. Stejně tak můžete tvrdit, že je to způsob, jak jemně vést své zákazníky k nejdůležitějším informacím na vašem webu, abyste mohli vytvářet tržby nebo dotazy.

Šance jsou, je to oba.

Navrhování navigace je jako mnoho jiných věcí v designu: neexistuje žádná univerzálně dohodnutá "správná cesta" k tomu. Každé internetové stránky představují své vlastní výzvy, které lze řešit několika způsoby. Dobrou zprávou je, že existují způsoby, jak přemýšlet a organizovat obsah, který minimalizuje riziko selhání.

70percentpure

70percentpure obsahuje jednoduchou navigaci, která je jak vertikální, tak horizontální.

1) Nejprve dokončete svou IA

Plánování obsahu pro velké webové stránky je zásadním úkolem, který musí být dokončen před navržením navigace. Jinak známý jako IA (informační architektura) tento přehled, porozumění a manipulaci s vaším obsahem je to, co tvoří páteř použitelnosti vašeho webu. Navrhování vaší navigace dříve - nebo namísto - správné navrhování vašeho posouzení dopadů by bylo jako vytvoření indexu knih před sázením stránek. Není to dobrý nápad.

Při práci na IA pomáhá přirozená schopnost vidět velký obrázek. A co je důležitější, musíte mít možnost zobrazit obsah z pohledu uživatele. Někdy to znamená, že jde proti vlastnímu způsobu, jakým si klient může kategorizovat svůj obsah - a tak se připravte na odpor, pokud tomu tak je.

Zde je několik věcí, které můžete požádat, abyste pomohli při přípravě schématu a ospravedlnit ji klientovi:

  • Které stránky jsou pro tento web potřebné?
  • Má každá stránka účel v rámci širšího schématu a je obsah rozdělen na rozumné, relativní kusy?
  • Jaké příspěvky musí být přidány do budoucnosti?
  • S jakými skupinami uživatelů pracujete? (např. přihlášení / odhlášení, typy odběru, inzerenti apod.)
  • Jaký je primární cíl pro každý typ uživatele?

Odpovědět na všechny výše uvedené a pochopení toho, jak se váš obsah týká vašich uživatelů, je základem dobrého navigačního návrhu.

2) KISS: Někdy je to jednoduché

Každý, kdo někdy použil webovou stránku, se pravděpodobně shodne: navigační oblast by měla být co nejjednodušší. Ohromující uživatel s volbami a přeplněním navigace s textem je špatný nápad a bude vážně narušit celkovou použitelnost vašeho webu.

bloomberg

Jednoduchá navigace společnosti Bloomberg zpochybňuje složitost informací na svých stránkách.

A přesto jednoduchost může být klamavá. Skočte hlouběji a možná zjistíte, že to, co je skutečně poměrně složité, bylo šikovně zabaleno způsobem, který je jednoduchý. To je IA v akci.

Vezměte například domovskou stránku společnosti Microsoft. Jejich hlavní navigace má pouhých čtyři položky, které z hlediska jejich sortimentu znějí jako nedostatečné. Ale drop-downs jsou velmi chytře rozděleny do sekcí, a prezentovány tak, že můžete najít to, co hledáte rychle a snadno.

microsoft

Podstránky jsou jako mini-stránky, a to ve stejném formátu navigace. Nabídka se cítí a chová se stejným způsobem, ale přizpůsobuje se, abyste nabídli více detailů, čím hlouběji se dostanete na místo.

microsoft2

Je snadno použitelný, předvídatelný a konzistentní. Vezmeme-li v úvahu jejich sortiment a počet stránek na svých webových stránkách, není to žádný špatný výkon a je samozřejmě výsledkem mnoha hodin iterativního vývoje. Nejenže se cítí jako jeden z jejich produktů - což je pro návštěvníka velice uklidňující - ale organizuje obsah způsobem, který je vhodný jak pro zákazníky, tak pro Microsoft.

3) Zvolte pozornost

Vzhledem k tomu, že obrazovka počítače je tradičně používána v krajinném formátu, vodorovná navigace má velký smysl. Tolik času se cítí vyrovnanější, méně rušivé a snadné umístit z hlediska návrhu.

oculus

Oculus, výrobci sluchátek VR, by byli hloupí, kdyby nepromluvili o virtuální krajině s horizontálním menu. Nejen, že nese pěknou metaforu, ale dovoluje uživateli posunout se na stránku hlouběji do svého obsahu.

Horizontální nabídky však nepřidávají žádnou hodnotu v každém kontextu, což je důvod, proč uvidíte hodně vertikální navigace, zejména v elektronickém obchodě. Nosí ozvěny barevných karet, které vám pomohou nalézt produkty ve fyzickém katalogu a vyhnete se přeplnění vodorovného pruhu s příliš velkým množstvím textu a příliš mnoha možností.

Dobrá vertikální navigace není jednoduchý výkon, zvláště pokud máte spoustu produktů. To je důvod, proč se mi to líbí Jack Jones.

jackjones

Ikony vedle textu skutečně napomáhají čitelnosti. Jednoduché tvary jsou překvapivě komunikativní a pomáhají udržovat navigační oblast zaměřenou a uklizenou. Klepněte na kategorii a nabídka se rozbalí, aby se zobrazily dílčí možnosti, a to opět způsobem, který je pro oko velmi snadný.

Více neobvyklé použití vertikálního menu najdete na stránkách Squarepushera. Navigace se zde používá jako karta mimo hlavní obsah, kterou může uživatel jednoduše posouvat a proklikat. Je to mnohem lineárnější přístup a odráží postupnou povahu stopy Squarepusher.

squarepusher

Pravidla se mění

Stejně jako u všech věcí na webu přinášejí nové techniky, technologie, přístroje a trendy vlastní výzvy a inovace. Odpovědný webový design znamená, že tradiční horizontální nav je nyní také vertikální nav (na menších obrazovkách). Parallaxové techniky vidí navigační oblasti odlivu a proudění jako příliv, v závislosti na tom, kde se nacházíte na stránce.

Neexistuje jediný způsob, jak vytvořit perfektní webovou stránku. Ale iterativní přístup k navrhování a testování, s výhodou s přístupem ke statistikám a konverzi dat vašeho webu, pravděpodobně přinese nejlepší výsledky.

Být motorem, který řídí váš web, vaše navigace by měla být předvídatelná, jednoduchá, konzistentní a dobře umístěná.