Navrhování výherní navigační menu Nápady a inspirace

Navigační menu na webové stránce je jako dopravní značka na ulici nebo na úrovni adresáře v nákupním centru. Nemůžete se dostat do cíle, aniž byste předem věděli, kde jste. Podobně jako v reálném životě je velmi důležitá navigace ve webovém designu a hraje významnou roli v použitelnosti webových stránek i v uživatelském prostředí.

V současné době můžete vidět spoustu různých typů navigačních menu se zajímavými, kreativními a neobvyklými návrhy. Ale jak je to s účinnou navigací na webových stránkách, jak by to vypadalo; jak by to mělo vypadat?

Dnes bych se rád podělil o své postřehy a znalosti o důležitosti navigace ve web designu. Odhalím několik jednoduchých tipů, které můžete použít ke zlepšení navigace a použitelnosti svých webových stránek. Tam budou také některé příklady efektivní navigační menu, aby vám nějakou představu o tom, jak naplánovat další design.

Informační architektura

Navigační plánování by mělo začínat informační architekturou. Je důležité se posadit a brainstorming o informační architektuře webu. Musíte zjistit, jaké funkce webové stránky nabízí, co je nejdůležitější a co by mohlo být umístěno v nižších úrovních v informační hierarchii.

Informační architektura zahrnuje funkce, potřeby uživatelů, mapa stránek, testování a drátové modely. Více informací o informační architektuře si můžete přečíst v článku Cameron Chapman v Informační architektuře 101: Techniky a osvědčené postupy.

Používání technologií podporujících uživatele

Nepoužívejte Flash, JavaScript, jQuery ani nic jiného, co by mohlo bránit v přístupu k navigaci na vašich webových stránkách při vytváření navigačního panelu, nebo alespoň ujistěte se, že jsou schopny ladně degradovat..

Další odkazy na ladná degradace javascriptu, podívejte se na tento příspěvek na 10 Užitečné metody zpětného volání pro CSS a Javascript.

Používejte jednoduché, uživatelsky přívětivé podmínky

Je lepší použít jednoduché, jasné a termíny, které lze snadno zjistit než zachovat pouze podmínky pro navigační menu. Jakýkoliv odkaz, který vezme uživatele více než sekundu nebo dva, aby zjistil, je pravděpodobně nevhodný pro použití.

Pokud uživatel potřebuje kliknout na odkaz, aby zjistil, co tento odkaz vede, pak to přispěje k špatné uživatelské zkušenosti pro vaše návštěvníky.

Příklady

Pojmy v navigačním menu na webových stránkách Larissy Ness jsou srozumitelné a dostatečně srozumitelné. Uživatelé to nepovažují za matoucí, protože již mají zkušenosti s takovými nabídkami.

Zde je další dobrý příklad čistého a přehledného menu navigace na webu s běžnými výrazy, které jsou používány v csupportu.

Kreativní agentura Eighty8Four používá termín "showroom", který může být pro návštěvníky matoucí. Tento termín může znamenat portfolio nebo práci, ale není jasné a návštěvníci nemají jinou možnost než kliknout, aby si to zkontrolovali.

Standardizujte design navigace

Použijte stejný navigační model na všech stránkách. Je to velmi důležité, protože bez konzistentního designu může uživatel skutečně myslet, že je na jiné webové stránce. Ujistěte se, že používáte stejný model navigace, aby uživatelé mohli snadno procházet vaše webové stránky bez ztráty.

Bluegg, níže, používá jednoduchý a čistý design navigace, který zůstává stejný ve všech podstráních. Jediný rozdíl je barevný indikátor, který zobrazuje stránku, na které se návštěvník právě nachází.

Uveďte, kde jste

Je velmi důležité, aby uživatel věděl, kde je neustále. Můžete to udělat změna pozadí odkazu, barva názvu stránky nebo otočte text tučně V navigačním menu se liší od ostatních.

Austin Eastciders používá jinou barvu a pozadí pro označení stránky, na které je uživatel zapnutý. Tento indikátor může také fungovat jako jemná změna designu, například použitím a různé navigační pozadí který vytváří pocit, že jiné položky menu jsou v hloubce.

Mediální chirurgie používá tmavší barvu jako indikátor otevřené stránky. Jednoduchý, ale účinný.

Používejte webové konvence

Je to vše o snadno použitelné a intuitivní navigaci na webu. Webové konvence usnadňují návrhářům práci kolem jejich návrhů. Většina uživatelů by klikla na logo webové stránky, aby se vrátila na domovskou stránku.

Pokud ne, děláte jim čas, abyste se naučili něco nového nebo v některých případech je nepříjemné tím, že neposkytují to, co očekávají, že budou běžně přijímané navigační normy.

Více se můžete dozvědět zde:

10 Konvence Web Design
Nepřestavujte kolečko Web Design
Design s webovými konvencemi

Inject Design umístí logo v levém horním rohu, které dnes patří k nejpoužívanějším webovým zvyklostem.

Adams stvoření používá jeden z nejběžnějších webových konvence - logo je umístěno v levém horním rohu webové stránky a odkazy na domovskou stránku.

Otestujte: Zapojte třetí stranu

Vždy si vyzkoušejte svůj navigační design s jakoukoli osobou, která dříve použila internet. Možná budete chtít přivést lidi, kteří se netýkali procesu návrhu, aby to otestovali. Sledujte jejich preference, když navigují přes vaše stránky a analyzovat čas, který jim trvalo, než nalezly stránky, na které byly hledány.

Pro lepší přesnost, zapojit více lidí, sbírat data, analyzovat a shrnout pro lepší nošení. Pokud je to nutné, proveďte průzkum po skončení testu. Můžete získat nějaké neočekávané nápady a vstupy, které by jinak bez tohoto testu nezaznamenaly.

Poskytnout kontext

Chcete-li být konzistentní s vaším obsahem a navigací, poskytněte uživatelům webových stránek kontext, ve kterém mohou rychle najít věci, které potřebují. Můžete umístit malé ikony související s obsahem, na který odkazujete, nebo krátkými popisky, abyste získali přehled o tom, o čem je stránka.

Moje vlastní kolo používá jednoduché ikony, aby uživatelům poskytlo více informací o tom, co mohou na určité podstránce najít.

Sarah Parmenterová používá krátké a pěkné titulky pod hlavní navigací k poskytnutí některých informací o podstránkách, na které navazuje hlavní navigace.

SEO účely

Google má rád důslednou navigaci. Je dobré mít konzistentní navigaci nejen pro uživatele, aby pochopili a získali představu o tom, jak procházet vaše webové stránky, ale také pro vyhledávače, které indexují vaše webové stránky..

Vyhledávače roboti budou procházet vaše webové stránky s cílem indexovat vaše webové stránky a dát odkazy na stránce výsledků vyhledávače. Pokud chcete být viditelní, věnujte pozornost dobrému navigačnímu designu a získejte větší provoz.

Volné navigační skripty (CSS a jQuery)

Zde je stručný seznam nejnovějších navigačních nabídek, které by mohly být pro vaše projekty užitečné. Tyto skripty zlepší vaše uživatelské zážitky ještě více přidáním některých pěkných vlastností a zpříjemněním použití.

XML-řízený Vertical News Scroller Script pomocí HTML a jQuery: vScroller

Filtrify

Stránka Scroller

Portfolio časové osy

HorizontalNav

CSS3 Minimalistická navigační nabídka

Efekt kruhové navigace s CSS3

Navigační efekty mřížky s jQuery

Ascensor

Vytvořit elegantní navigační nabídku CSS3

Ukázka krásné horizontální navigace

A v neposlední řadě některé inspirativní horizontální navigační menu. Podívejte se na tyto úžasné webové stránky a jejich navigační menu, abyste našli nové nápady pro své projekty.

Ch3mical