Dizajniranje pobjedničkih navigacijskih izbornika i ideja
Izbornik za navigaciju na web-lokaciji nalik je cestovnom znaku na ulici ili razini direktorija u trgovačkom centru. Ne možete doći na svoje odredište bez da prvo znate gdje se nalazite. Kao iu stvarnom životu, navigacija u web dizajnu je vrlo važna i igra važnu ulogu u upotrebljivosti web-mjesta, kao iu korisničkom iskustvu.
Danas možete vidjeti mnogo različitih vrsta navigacijskih izbornika s zanimljivim, kreativnim i neobičnim dizajnom. Ali kako o učinkovitoj navigaciji na web-lokaciji, kako bi to izgledalo; kako bi to trebalo izgledati?
Danas bih želio podijeliti svoja zapažanja i znanja o važnosti navigacije u web dizajnu. Otkrit ću nekoliko jednostavnih savjeta koje možete upotrijebiti za poboljšanje navigacije i upotrebljivosti web-lokacije. Tu će biti i nekoliko primjera učinkovitih navigacijskih izbornika koji će vam dati ideju o tome kako planirati vaš sljedeći dizajn.
Informacijska arhitektura
Planiranje navigacije treba započeti s informacijskom arhitekturom. Važno je sjesti i razmislite o informacijskoj arhitekturi web-lokacije. Morate shvatiti koje značajke web-mjesta nudi, što je najvažnije i što se može smjestiti na niže razine u hijerarhiji informacija.
Informacijska arhitektura uključuje značajke, potrebe korisnika, Sitemap, testiranje i wireframes. Više o informacijskoj arhitekturi možete pročitati u članku Cameron Chapman u Informacijskoj arhitekturi 101: Tehnike i najbolje prakse.
Korištenje tehnologija koje omogućuju korisnici
Izbjegavajte korištenje Flash-a, JavaScripta, jQuery-a ili bilo čega drugog što bi moglo onemogućiti pristup navigaciji web-lokacijama u izradi navigacijske trake ili barem pobrinite se da se dostojanstveno degradiraju.
Za više referenci na graciozna degradacija javascripta, check out ovaj post na 10 Korisni povratne metode za CSS i Javascript.
Koristite jednostavne, razumljive za korisnike
Bolje je koristiti jednostavni, očigledni i uvjeti koji se lako mogu otkriti nego se držati uvjeta samo za vaš navigacijski izbornik. Svaka veza koja korisnicima donosi više od sekunde ili dva za otkrivanje vjerojatno je neprikladna za upotrebu.
Ako korisnik treba kliknuti na vezu kako bi shvatio na što vodi veza, to će pridonijeti lošem korisničkom iskustvu za vaše posjetitelje.
Primjeri
Uvjeti u navigacijskom izborniku web stranice Larissa Ness lako su razumljivi i dovoljno uobičajeni. Korisnici to neće smatrati zbunjujućim jer već imaju iskustva s ovakvim izbornicima.
Evo još jednog dobrog primjera čistog i jasnog navigacijskog izbornika s uobičajenim terminima koji se koriste na web-mjestu csupport.
Kreativna agencija Eighty8Four koristi pojam "izložbeni prostor" koji može zbuniti posjetitelje. Ovaj pojam može značiti portfelj ili posao, ali nije jasno i posjetitelji nemaju izbora nego da kliknu kako bi ga provjerili.
Standardizirajte dizajn navigacije
Koristite isti navigacijski model na svim stranicama. Vrlo je važno jer bez dosljednog dizajna korisnik može zapravo misliti da je na drugoj web-lokaciji. Provjerite koristite li isti navigacijski model kako bi korisnici mogli lako pretraživati vašu web-lokaciju bez gubitka.
Bluegg, prikazan u nastavku, koristi jednostavan i čist dizajn navigacije koji ostaje isti u svim podstranicama. Jedina razlika je pokazatelj boje koji prikazuje stranicu na kojoj je posjetitelj trenutačno na.
Označite gdje se nalazite
Od ključne je važnosti da korisnik uvijek zna gdje se nalazi. To možete učiniti putem mijenjanje pozadine veze, boja naziva stranice ili pretvorite tekst u bold u navigacijskom izborniku kako bi se razlikuje od ostalih.
Austin Eastcideri koristi drugu boju i pozadinu da označi stranicu na kojoj je korisnik uključen. Ovaj indikator također može raditi kao suptilna promjena dizajna, na primjer pomoću a različite pozadine navigacije što stvara osjećaj da su druge stavke izbornika u dubini.
Medijska kirurgija koristi tamniju boju kao indikator za otvorenu podstranicu. Jednostavno a učinkovito.
Koristite web-konvencije
Riječ je o jednostavnoj i intuitivnoj navigaciji web-stranica. Web konvencije olakšavaju dizajnerima da zaobiđu svoje dizajne. Većina korisnika kliknula bi na logotip web-lokacije kako bi se vratila na početnu stranicu, pa dizajnirajte svoj logotip kako biste to učinili.
Ako ne, tjerate ih da provode vrijeme da nauče nešto novo ili ih u nekim slučajevima ometaju time što ne pružaju ono što očekuju da budu općeprihvaćene navigacijske norme.
Ovdje možete saznati više o web konvencijama:
- 10 Konvencije o web dizajnu
- Nemojte ponovno izmjenjivati kotačić web-dizajna
- Dizajn s web konvencijama
Inject Design stavlja logotip u gornji lijevi kut koji odgovara jednoj od najčešće korištenih web konvencija danas.
Stvaranje Adamsa koristi jednu od najčešćih web konvencija - logotip se nalazi na lijevom gornjem kutu web stranice i linkovima na početnu stranicu.
Testirajte ga: uključite treću stranu
Uvijek testirajte svoj navigacijski dizajn s bilo kojom osobom koja je prije koristila internet. Možda biste htjeli dovesti ljude koji nisu bili povezani s procesom dizajna da bi ga testirali. Pratite njihove preferencije kada navigirate putem svoje web-lokacije i analizirajte vrijeme potrebno za pronalaženje stranica za koje su tražili.
Za bolju točnost, uključiti više ljudi, prikupiti podatke, analizirati ih i sažeti za bolje uklapanje. Ako je potrebno, napravite anketu nakon testa. Možda ćete dobiti neke neočekivane ideje i unose koji bi inače ostali neotkriveni bez ovog testiranja.
Osigurati kontekst
Da biste bili konzistentni sa svojim sadržajem i navigacijom, korisnici web-lokacije mogu pronaći nešto što im je potrebno brzo. Možete postaviti male ikone vezane uz sadržaj na koji se povezujete ili kratke opise kako biste dali pregled o čemu se stranica radi.
Moj vlastiti bicikl koristi jednostavne ikone kako bi korisnicima pružio više informacija o tome što mogu pronaći u određenoj podstranici.
Sarah Parmenter koristi kratke i lijepe natpise pod glavnom navigacijom kako bi pružio neke informacije o podstranicama na koje se povezuje glavna navigacija.
SEO svrhe
Google voli dosljednu navigaciju. Dobro je imati konzistentnu navigaciju ne samo za korisnike da razumiju i dobiju ideju o tome kako se kretati kroz web-lokaciju, već i za tražilice za indeksiranje vaše web-lokacije.
Roboti za tražilice pretražit će vašu web-lokaciju kako bi indeksirali svoju web-lokaciju i stavili linkove na stranicu s rezultatima tražilice. Ako želite biti vidljivi, obratite pozornost na dobar dizajn navigacije i dobit ćete više prometa.
Besplatne skripte za navigaciju (CSS i jQuery)
Evo kratkog popisa najnovijih navigacijskih izbornika koji bi vam mogli biti korisni za vaše projekte. Ove skripte će učiniti vaš proizvod korisnijim čak i boljim dodajući neke lijepe značajke i čineći ga zadovoljstvom korištenja.
Vertikalne vijesti Scroller Vertikalne vijesti pomoću XML-a koristeći HTML i jQuery: vScroller
Filtrify
Stranica Scroller
Timeline Portfolio
HorizontalNav
CSS3 Minimalistički izbornik za navigaciju
Efekt navigacije kruga s CSS3
Učinci navigacije na mrežu pomoću jQuery
Ascensor
Napravite elegantan CSS3 navigacijski izbornik
Izlog lijepe horizontalne navigacije
I zadnje, ali ne i najmanje važno, nadahnjujuće izbornike za horizontalnu navigaciju. Provjerite ove nevjerojatne web-lokacije i njihova rješenja navigacijskog izbornika kako biste pronašli nove ideje za svoje projekte.
Ch3mical
Bloom Search Marketing Inc.
Alex Perez
Libor Zezulka
Hauska!
Zlatni otoci
Neil Carpenter
Marc Thomas
3D polistiren
Liechtenecker
Svijet avanture
Arbutus fotografija
OMDRL
4 Pines Beer
Vino lovci
Nadam se da ćete u ovom članku pronaći korisne i informativne članke. Ako imate bilo kakvih razmišljanja ili se ne slažete, podijelite svoje mišljenje u odjeljku za komentare.
