Navigační vzory pro deset společných typů webových stránek
Navigace je jedním z nejdůležitějších aspektů jakékoli webové stránky. Bez dobré navigace se návštěvníkům stává stránka zbytečná. Nemohou nalézt informace, které potřebují, a místo toho vyhledají konkurenční stránky. Je důležité, aby vaše stránky byly snadno navigovány, pokud chcete být úspěšným designérem.
iBut neexistují žádná řešení pro navigaci. To, co funguje skvěle na zpravodajské stránce, nemusí fungovat dobře pro osobní stránky. Něco, co je na blogu neuvěřitelně uživatelsky přívětivé, může být na webu e-commerce frustrující.
Níže jsou deset běžných typů webů s návrhy na druhy navigačních vzorů, které pro každou z nich dobře fungují.
Existují také příklady, které vám dávají lepší představu o tom, o čem mluvíme. Neváhejte a sdílejte v komentářích další skvělé příklady!
Všechny weby
Existují určité navigační vzory, které fungují prakticky na všech stránkách. Místo toho, aby znovu shromáždili stejné informace v každé z níže uvedených kategorií, prostě je sem vložím.
Prvním vzorem je navigace s kartami. Záložky jsou perfektně vhodné pro navigaci, protože psychicky připomínají návštěvníky papírových záložek a navigují do nové části notebooku nebo pojidla, něco, co tlačítka nebo prosté textové odkazy nedělají. Záložky jsou téměř vždy preferovanou metodou stylingu vašich hlavních navigačních odkazů, ačkoli samozřejmě fungují nejlépe, pokud je v nabídce omezený počet odkazů.
Druhým vzorem je navigace v záhlaví. Pokud vaše webové stránky mají záhlaví (a většina webových stránek), pak navigace nad hlavičkou je dobrý nápad. Návštěvníci jsou zvyklí hledat záhlaví navigačních odkazů. Toto předdefinované chování usnadňuje vytváření webových stránek uživatelsky přívětivější tím, že umístíte navigaci do nebo v záhlaví.
Konečným vzorem, který platí pro prakticky všechny stránky, je navigace na zápatí. Mnoho uživatelů (i když ne všichni) se podívá na zápatí odkazu, pokud v jiné navigaci nenajdou to, co hledají. Mnoho základních stránek je často spojeno se zápachem, včetně odkazů "o", "kontaktu" a "sitemap", ať jsou propojeny jinde v navigaci nebo ne.
1. Blogy
Blogy mají obecně velký objem obsahu v obráceném chronologickém pořadí. To představuje jak logický rámec pro vaši navigaci, tak i některé jedinečné výzvy, v závislosti na typu blogu.
Většina blogů bude používat kombinaci stránkování (nebo nepřetržitého posouvání), archivační stránky, navigaci na bočním panelu pro kategorie a / nebo značky a případně i navigaci na zápatí a zápatí. Je důležité přesně uvažovat o tom, jak pravděpodobně budou vaši návštěvníci chtít mít přístup k obsahu na vašem blogu.
Například osobní blog nemusí potřebovat navigaci podle kategorií nebo tagů mimo odkazy v meta informací pro každý příspěvek. V takových případech chcete, aby návštěvníci měli přístup k obsahu v reverzně chronologickém pořadí, nikoli skákat podle předmětu. Blog na téma, na druhé straně, musí mít navigaci podle kategorií a značek, protože návštěvníci pravděpodobně hledají informace o konkrétních tématech v celkovém tématu.
Na co nejmenším místě by měly blogy obsahovat navigaci pro chronologické přesuny obsahu (buď stránkování, další / předchozí odkazy nebo nepřetržité posouvání), stejně jako navigace v záhlaví nebo postranním panelu pro konkrétní stránky mimo hlavní blogovou stránku.
Téma (a někdy i firemní) blogy by také měly obsahovat nabídky kategorií nebo značek v jejich navigaci buď v záhlaví nebo postranním panelu. Zvláště velké blogy by také měly zvážit implementaci vyhledávací funkce, která by uživatelům usnadnila rychle najít přesně to, co hledají. Jen se ujistěte, že vyhledávací funkce pracuje podle určení a skutečně přináší všechny relevantní výsledky.
Ecoki , dále obsahuje kategorie nejvyšší úrovně v navigačním řádku s navigací na důležité stránky v navigačním panelu sekundárního záhlaví. Je to efektivní uspořádání, které jasně zdůrazňuje nejčastěji používané odkazy.
2. Zprávy
Zprávy jsou podobná blogům, protože obecně prezentují příběhy v reverzně chronologickém pořadí. Zprávy jsou často vysoce kategorizované a mají komplexnější informační architekturu než mnoho jiných druhů stránek. Z tohoto důvodu jsou jejich navigační modely často složitější.
Klíč není navigace komplikovanější, než je třeba. Drop-down a fly-out menu jsou oběma dobrými způsoby, jak se vypořádat s většími menu, aniž by se na stránku zalomily. Pokud se podíváte na větší zpravodajské weby (například na Zprávy Google například níže), rozdělí zprávy do širokých kategorií, jako je Politika, Místní, Světová, Sportovní, Zábava atd. Které kategorie použijete, závisí na tom, je obecná zpravodajská stránka nebo aktuální zpravodajské místo.
Značky mohou podstatně zlepšit navigaci. Označením každého příběhu uživatelům usnadňuje najít související příběhy, aniž by vytvářely komplikovanou nebo nafouknutou strukturu kategorií. Je to dobrý nápad nejen přidat odkazy na tagy v každém článku, ale také zahrnout seznam tagů nebo cloud tagů někde (pouze ty, které obsahují oblíbené značky, mohou být dobrým nápadem pro weby se stovkami tagů).
Spojení inline v článcích výrazně zlepšuje uživatelské zkušenosti. Mnoho z větších zpravodajských stránek to dělá, což uživatelům umožňuje okamžitě získat přístup ke všem článkům na téma. Je to velmi podobné začlenění tagů, ale spíše než seznam na začátku nebo na konci článku, odkazy jsou v samotném textu.
3. Stránky elektronického obchodu
Webové stránky elektronického obchodování jsou někdy neuvěřitelně složité a obsahují stovky (nebo tisíce) jednotlivých stránek pro produkty a další informace. Z tohoto důvodu je způsob ovládání navigace nezbytný jak pro uživatelskou zkušenost, tak i pro spodní řádek. Bez vynikající navigační struktury budou návštěvníci e-commerce mít obtížnější čas najít výrobky, které hledají, což znamená, že existuje velká šance, že se z frustrace obrátí na konkurenty.
Hlavní věc, kterou každý internetový obchod s více než několika potřebami potřebuje, je dobrý vyhledávací systém. Asistované vyhledávání je klíčové, kdy uživatelé mohou vyhledávat pouze podle klíčových slov, ale také vylepšovat výsledky podle cen, velikosti, kategorií nebo jiných metrik (v závislosti na konkrétních produktech).
Navigace v kategorii je také nutná pro uživatele, kteří chtějí procházet. V závislosti na tom, zda používáte podkategorie, může být dobrým nápadem také navigace s navigačním zařízením (pokud jsou vaše stránky více než dvě nebo tři úrovně hluboké, mohou se zlepšit použitelnost).
Umožnit návštěvníkům více způsobů, jak najít výrobky, které chtějí, je skvělý způsob, jak zvýšit prodej, ale ujistěte se, že každá metoda zobrazuje všechny relevantní produkty. Pokud návštěvníci zjistí, že vyhledávání vrací jednu sadu produktů při procházení, vrátí jinou sadu, pouze to povede k frustraci.
The Blik web, níže, je skvělým příkladem webu, který využívá postranní panel s filtry pro vylepšení výsledků produktu. Je to řízený vyhledávací vzor, aniž by se objevil vyhledávání.
4. Informační a referenční stránky
Referenční stránky mají obecně jednu společnou věc: množství informací na mnoha stránkách. Díky tomu je těžké vytvořit libovolný standardní menu. Kategorie mohou být užitečné pro procházení, ale když se začnete dostat k bodu, že mají tisíce, desítky tisíc nebo dokonce miliony stránek (jako Wikipedia), systém kategorie se rozpadne. Navíc většina lidí jít na referenční stránky pro určitý účel, a ne procházet, takže kategorie nejsou zvláště užitečné.
Je důležité, aby referenční weby měly vynikající vyhledávací schopnosti. Pokyny pro vyhledávání, stejně jako ty, které se používají na webových stránkách elektronického obchodování, mohou být užitečné, zvláště pokud jsou používány ve spojení s dobrou organizací značkování a kategorií.
Je to zřejmé Reference.com , níže, chce, aby návštěvníci vyhledávali, co hledají, protože jsou umístěny v horní části obrazovky.
Stránky na referenční stránce by měly také využívat inline propojení se souvisejícími informacemi. Díky tomu je návštěvníkům snadné najít veškerý materiál, který potřebují k tomu, aby pochopili, co čtou, aniž by museli provádět více vyhledávání. Potřeba inline propojení je důvod, proč wiki platformy obecně mají standardní syntaxi pro propojení v textu článku, takže tvůrci obsahu nemusí věnovat čas hledat příslušné odkazy.
Wikipedia , níže a další stránky wiki využívají inline propojení pro přidávání kontextu do článků.
5. Firemní stránky
Existuje obrovská rozmanitost ve struktuře a velikosti firemních stránek. Některé jsou prostě přitahovat nové zákazníky. Ostatní jsou vytvořeny tak, aby informovali aktuální zákazníky. Ještě jiní musí sloužit jako přitažlivost pro nové zákazníky, zpravodajský portál pro stávající zákazníky a přední stranu pro firemní intranet.
Bez ohledu na účel firemního webu je klíčová navigace jasná. Nechcete, aby uživatelé museli trávit čas hledáním vaší navigace nebo se pokoušeli zjistit, na který odkaz kliknout, abyste získali místo, kam mají jít. Ujistěte se, že odkazy jsou uspořádány logicky, že každý z nich má snadno pochopitelný význam a že jsou umístěny na logických místech (záhlaví a postranní panel jsou tady vaši přátelé).
Všechny níže uvedené stránky ukazují, že právě proto, že se navigace nachází na nejčastějších místech, neznamená to, že nemůže být kreativní. Dokud je použitelná a snadno ji najít, neváhejte a vytvořte něco jedinečného.
Na stránkách s více než desítkou stránek je dobré zahrnout funkci vyhledávání. Také je vhodné zahrnout soubor Sitemap, který usnadní uživatelům, kteří mají potíže s vaší pravidelnou navigací, najít přesně to, co hledají.
6. Komunitní nebo sociální sítě
Obecně platí, že s velkými sociálními sítěmi je vyhledávání hlavním prostředkem navigace. To dává smysl, když jsou na webu miliony (nebo dokonce miliardy) stránek. Standardní navigace založená na menu je při řešení tohoto objemu informací zbytečná.
Takže vyhledávání se stará o celkovou navigaci na webu. Ale to stále opouští stránky profilu členů. Zde je důležité, aby na celém webu existovala konzistence. Bez ohledu na to, zda vaše stránky umožňují členům přizpůsobit své profily nebo ne, je nutné, aby se odkazy nacházely na stejném místě v každé stránce.
Vezměte například Facebook: každý profil člena a každá stránka má odkazy na věci, jako jsou fotografie a informace na levé straně. Oznámení, zprávy a přání přátel jsou vždy spojeny v horní části, stejně jako odkazy na nastavení účtu a odhlášení. Standardní horní navigační panel, který vždy odkazuje na účet a informace návštěvníka, se stal hlavním pilířem dobře navržených sociálních sítí.
Inline odkazy by měly být také konzistentní. Například kdykoli se uživatelské jméno zobrazí jako odkaz, měl by odkazovat na profil uživatele, bez ohledu na to, s jakým obsahem je spojen. Přemýšlejte, které informace by měly logicky odkazovat na které stránky a potom se ujistěte, že je konzistentní bez ohledu na to, kde se tyto odkazy objevují.
7. Místa událostí
Místa událostí jsou obecně jednoduchá a nemají obrovský počet stránek. Ale je důležité myslet na to, jak vaši návštěvníci budou používat stránky. S největší pravděpodobností budou chtít provést jednu z následujících akcí: přihlaste se k události, zjistěte, kdo se účastní nebo mluví, získáte informace o návštěvě (včetně nákladů a věcí, jako jsou hotelové lokality a hotely v okolí) a podívejte se na plán události.
Přihlášení k události, i když je to bezplatná událost, by se mělo považovat za transakci elektronického obchodu. Z tohoto důvodu chcete pro registraci použít prominentní tlačítko výzvy k akci.
Standardní záhlaví a / nebo postranní navigace jsou vynikající volbou pro odkazy na jiné stránky. Místní navigace může být také nezbytná, pokud budete zahrnovat jednotlivé stránky pro věci, jako jsou konkrétní workshopy nebo reproduktory. Rozbalovací nabídky nebo rozbalovací nabídky mohou v tomto případě fungovat pouze v případě, že máte omezený počet dílčích odkazů. V opačném případě je lepší používat sub-navigaci v postranním panelu nebo v hlavní stránce.
The Hull Digital Live 10 webové stránky mají stručnou, snadno použitelnou navigační hlavičku, která usnadňuje nalezení přesně toho, co může návštěvník hledat.
Tip: Pokud váš web pro události bude zahrnovat oblast návštěvníků nebo intranet, podívejte se na návrhy navigace na sociální síti nebo webu komunity pro navigační pokyny.
8. Zkontrolujte stránky
Přehledy stránek se obecně používají dvěma způsoby. Prvním je, když se uživatelé zajímají o konkrétní produkt a chtějí vidět recenze pro danou položku. V tomto případě je vynikající vyhledávací funkce nejlepší navigace. Umožňuje uživatelům rychle přistupovat přesně k produktu, který hledají.
Druhým účelem je výzkum určitých druhů výrobků. Pro toto použití je vyhledávání stále cennou navigační metodou. Kategorie a vyhledávané vyhledávání jsou stejně důležité. Umožňuje uživatelům procházet recenze podle kategorií a podkategorií a umožňuje jim najít různé produkty, které vyhovují jejich potřebám. Tím, že je dále zpřesní, výsledky založené na cenách nebo značkách umožňují ještě lepší uživatelskou zkušenost.
Blippr , dále obsahuje navigaci v kategorii (s rozbalovacími programy pro navigaci) a prominentní vyhledávací lištu.
9. Osobní stránky
Osobní stránky jsou opravdu divoké karty světa světového designu. Můžete použít prakticky jakýkoli druh navigačního vzoru, který chcete. Hlavní stránky, jako je záhlaví a navigace na bočním panelu, budou stále nejpoužívanější, ale není nic špatného dělat něco úplně jiného.
Osobní stránky by měly být odrazem majitele stránek. Pokud se v rámci osobnosti webu objeví něco neočekávaného, pak to všechno: jdi na to. Může se stát, že by někde někde bylo vhodné zahrnout odkaz na sitemap, ale pokud používáte neštandardní navigaci, usnadňuje návštěvníkům, kteří to "nechá", najít to, co hledají.
Daniel Mall je portfóliová stránka má jeden z nejvíce jedinečných navigačních vzorků, které jsem viděl. Je to snadné použití, zatímco je stále velmi odlišné od normy.
10. Galerie
Galerie obrázků a portfolia stránek by obecně měly používat kombinaci standardní záhlaví nebo navigace na bočním panelu, značkování a kategorie. Umožnit návštěvníkům zúžení zobrazovaných snímků na základě značky nebo kategorie je důležité pro dobré uživatelské zkušenosti, zejména pokud objem snímků roste.
Dokumentace bude také důležitá pro větší stránky. Nepřetržitý posun může vypadat jako dobrý nápad, ale protože galerie a portfolia stránek jsou svou povahou naplněná médiem, kontinuální posouvání může skončit pomocí mnoha systémových prostředků. Doporučil bych, aby to bylo proti jakémukoli webu s více než několika desítkami obrázků (i když na menší galerii a portfoliach to může být opravdu pěkný dotek).
Minimální výstava používá kategorie, vyhledávání a stránkování.
Odjezd
Pokud existuje jedna koncepce navigace, která je absolutní nutností bez ohledu na to, jaký typ webu vy navrhujete, je to toto: konzistence!
Můžete se dostat pryč s většinou možností logické navigace, pokud je to konzistentní v celém vašem webu. Nezačínejte s navigací na bočním panelu pro polovinu svého webu a navigačními nadpisy pro druhou polovinu, bez jakéhokoli logického důvodu. Pokud je domovský odkaz vždy vlevo nahoře, ujistěte se, že zůstává vlevo nahoře. To platí pro každý prvek vaší navigace a stává se exponenciálně důležitější, jak se velikost stránky zvyšuje.
Kromě konzistence je nejdůležitější, co musíte udělat při navrhování navigačních modelů, je přemýšlet o tom, jak návštěvníci skutečně použijí váš web. Nebojte se testování A / B nebo vícerozměrného testování, abyste zjistili, zda vaše navigační vzory skutečně fungují tak, jak by měly.
Bez ohledu na to, jak je vaše navigace v pohodě nebo nová, pokud neuskutečňuje, že je to základní funkce, která umožňuje návštěvníkům přesunout se z jedné oblasti vašeho webu do druhé tak, jak chtějí, vaše navigace selhala.
Neváhejte a sdílejte příklady skvělých navigačních vzorů v akci v komentáři níže! Také dejte nám vědět, pokud máte nějaké další tipy pro vhodné navigační vzory pro konkrétní typy stránek.