Nyerő navigációs menü ötletek és inspirációk tervezése
A webhely navigációs menüje olyan, mint egy útjelző az utcán vagy egy bevásárlóközpontban található szintű könyvtárban. Nem érheti el az úticélt anélkül, hogy először tudná, hogy hol van. Mint a valós életben is, a webdesign-navigáció nagyon fontos, és fontos szerepet játszik a weboldal használhatóságában és a felhasználói élményben.
Manapság rengeteg különböző navigációs menüt láthatsz érdekes, kreatív és szokatlan mintákkal. De hogyan lehet egy hatékony navigáció egy weboldalon, hogy néz ki; hogyan néz ki?
Ma szeretném megosztani észrevételeimet és ismereteimet a navigáció fontosságáról a web designban. Megmutatom néhány egyszerű tippet, amellyel javíthatja a webhely navigációját és használhatóságát. Van néhány példa a hatékony navigációs menükre is, hogy elképzelje, hogyan tervezheti meg a következő tervezést.
Információs architektúra
A navigációs tervezésnek információs architektúrával kell kezdődnie. Elengedhetetlen, hogy leüljünk és ötlet a webhely információs architektúrájáról. Meg kell kitalálni, hogy a webhely milyen jellegzetességeket kínál, mi a legfontosabb és mi lehetne az alacsonyabb szintű információs hierarchiában?.
Az információs architektúra magában foglalja funkciók, felhasználói igények, webhelytérkép, tesztelés és drótvázak. Az információs architektúráról bővebben Cameron Chapman cikkében olvashat az Információs architektúra 101: Technikák és legjobb gyakorlatok című cikkben.
A felhasználó által támogatott technológiák használata
Kerülje a Flash, JavaScript, jQuery vagy bármi más használatát, ami veszélyezteti a webhely navigációjához való hozzáférést, a navigációs sáv létrehozásakor, vagy legalább győződjön meg róla, hogy képesek lesznek károsan romlani.
További hivatkozások kecses romlása a javascript-nek, nézd meg ezt a hozzászólást 10 Hasznos Fallback módszerek CSS és Javascript.
Használjon egyszerű, felhasználóbarát kifejezéseket
Jobb használni egyszerű, nyilvánvaló és könnyen kitalálható kifejezések a navigációs menü csak iparági feltételeinek fenntartásához. Bármely olyan link, amely a felhasználókat több mint egy-két vagy több percig megtudja, valószínűleg nem használható.
Ha a felhasználónak egy linkre kell kattintania, hogy megtudja, mi a kapcsolat, akkor ez hozzájárul a látogatók rossz felhasználói élményéhez.
Példák
A Larissa Ness honlapjának navigációs menüjében található kifejezések könnyen érthetőek és elég általánosak. A felhasználók nem találják zavarosnak, mert már rendelkeznek ilyen menükkel.
Íme egy újabb jó példa a tiszta és tiszta webhely navigációs menüre, a szokásos kifejezésekkel, a neporton.
Az Eighty8Four kreatív ügynökség használja a "bemutatóterem" kifejezést, amely zavaró lehet a látogatók számára. Ez a kifejezés portfóliót vagy munkát jelenthet, de nem világos, és a látogatóknak nincs más választása, mint a belépéshez.
Szabványosítsa a navigációs tervet
Használja ugyanazt a navigációs modellt minden oldalon. Nagyon fontos, mert következetes kialakítás nélkül a felhasználó valójában úgy gondolja, hogy egy másik weboldalon van. Győződjön meg róla, hogy ugyanazt a navigációs modellt használja, hogy a felhasználók könnyen el tudjanak menni webhelyén anélkül, hogy elveszítenének.
Bluegg, Az alábbi ábrán egy egyszerű és tiszta navigációs tervet használunk, amely minden aloldalon változatlan marad. Az egyetlen különbség a színjelző, amely megmutatja, hogy a látogató melyik oldalon van.
Jelölje, hol van
Rendkívül fontos, hogy a felhasználó tudja, hol van. Ezt megteheti a link hátterének megváltoztatása, az oldalnév színe vagy fordítsa a szöveget félkövér a navigációs menüben, hogy eltérjen a másoktól.
Austin Eastciders egy másik színt és hátteret használ, hogy jelezze, hogy a felhasználó be van kapcsolva. Ez az indikátor finom dizájnváltozásként is működhet, például a különböző navigációs háttér ami azt az érzést kelt, hogy más menüelemek is mélyen vannak.
Média sebészet egy sötétebb színt használ a megnyitott aloldal megjelenítéséhez. Egyszerű, de hatékony.
Használja a webes egyezményeket
Mindez egyszerűen használható és intuitív weboldal navigációról szól. A webkonferenciák sokkal könnyebbé teszik a tervezők számára, hogy megtervezzék terveiket. A legtöbb felhasználó rákattint a webhely logójára, hogy visszatérjen a honlapra, így tervezze meg logóját, hogy ezt tegye.
Ha nem, hogy időt töltenek, hogy megtanuljanak valami újat vagy bizonyos esetekben nehezen érinti őket azzal, hogy nem nyújtja azt, amit elvárnak a közösen elfogadott navigációs normáknak.
A webes egyezményekről többet tudhat meg itt:
- 10 Webes tervezési egyezmények
- Ne terjessze újra a webes tervezést
- Tervezés webkonferenciákkal
Inject Design a logót a bal felső sarokban helyezi el, amely ma illeszkedik az egyik legelterjedtebb webkonferenciához.
Adams Creation az egyik leggyakoribb webkonferenciát használja - a logó a weboldal bal felső sarkában található, és a honlapra mutató hivatkozások.
Tesztelje: vegyen részt egy harmadik féllel
Mindig tesztelje a navigációs tervezést minden olyan személyrel, aki korábban használta az internetet. Előfordulhat, hogy olyan embereket szeretne hozni, akik nem kapcsolódtak a tervezési folyamathoz, hogy teszteljék. Figyelje meg a preferenciákat, amikor navigál a webhelyen keresztül, és elemezheti azt az időt, ameddig a keresett oldalak megtalálhatók voltak.
A jobb pontosság érdekében, több ember bevonása, az adatok összegyűjtése, elemzése és összefoglalása a jobb illeszkedésért. Ha szükséges, végezzen egy utóvizsgálatot. Lehet, hogy váratlan ötleteket és bemeneteket kap, amelyek egyébként nem maradnának észrevétlenek a tesztfutás nélkül.
Adjon kontextust
Annak érdekében, hogy a tartalom és a navigáció összhangban legyen, a webhelyhasználók bizonyos összefüggéseket találnak a gyorsan szükséges dolgok megtalálásához. A hivatkozott tartalomhoz kapcsolódó kis ikonok vagy rövid leírások helyezhetők el, hogy áttekintést adjanak arról, hogy mi az oldal.
Saját kerékpárom egyszerű ikonokat használ a felhasználóknak, hogy több információt kapjanak arról, hogy mit találnak egy bizonyos aloldalon.
Sarah Parmenter a fő navigációban rövid és szép feliratokat használ, hogy információt kapjon a fő navigációhoz kapcsolódó aloldalakról.
SEO célok
A Google szereti a következetes navigációt. Jó, ha konzisztens navigáció nem csak a felhasználók számára érthető, és elgondolkodik arról, hogyan navigálhat a webhelyén, hanem a keresőmotorokra is, hogy indexelje webhelyét.
A keresőmotor-robotok a webhelyén keresztül feltérképezhetik webhelyüket, és a keresőmotorok eredményoldalán helyezhetik el a linkeket. Ha látni akarja, figyeljen a jó navigációs tervezésre, és nagyobb forgalmat kapjon.
Ingyenes navigációs szkriptek (CSS és jQuery)
Itt van egy rövid lista a legújabb navigációs menükről, amelyek hasznosak lehetnek projektjei számára. Ezek a szkriptek még jobb funkciókat hoznak létre a felhasználó felhasználói élményéhez, és örömmel használják.
XML-alapú függőleges hírek görgetőszkript HTML és jQuery használatával: vScroller
Filtrify
Oldal görgető
Idősor-portfólió
HorizontalNav
CSS3 Minimalista navigációs menü
Kör navigációs hatás CSS3-val
Hálózati navigációs hatások a jQuery használatával
Ascensor
Hozzon létre egy elegáns CSS3 navigációs menüt
Gyönyörű vízszintes navigáció bemutatása
És végül, de nem utolsósorban néhány inspiráló vízszintes navigációs menüt. Ellenőrizze ezeket a csodálatos webhelyeket és a navigációs menü megoldásait, hogy új ötleteket találhasson projektjeihez.
Ch3mical
Bloom Search Marketing Kft.
Alex Perez
Libor Zezulka
Hauska!
Arany-szigetek
Neil Carpenter
Marc Thomas
3D Polystyren
Liechtenecker
Kaland világ
Arbutus fotózás
OMDRL
4 Pines Beer
Vadászok borai
Remélhetőleg ez a cikk hasznos és informatív lesz. Ha bármilyen gondolata van, vagy ha nem ért egyet, kérjük, ossza meg véleményét a megjegyzések részben.
