Projektowanie zwycięskiego menu nawigacyjnego Pomysły i inspiracje
Menu nawigacyjne na stronie internetowej jest jak znak drogowy na ulicy lub na poziomie katalogu w centrum handlowym. Nie możesz dotrzeć do miejsca docelowego bez wcześniejszej informacji o tym, gdzie jesteś. Podobnie jak w prawdziwym życiu, nawigacja w projektowaniu stron internetowych jest bardzo ważna i odgrywa ważną rolę w użyteczności strony internetowej, a także w obsłudze użytkownika.
Obecnie można zobaczyć wiele różnych rodzajów menu nawigacyjnych z ciekawymi, kreatywnymi i nietypowymi projektami. Ale co powiesz na skuteczną nawigację w witrynie, jak by to wyglądało; jak to powinno wyglądać?
Dzisiaj chciałbym podzielić się swoimi spostrzeżeniami i wiedzą na temat znaczenia nawigacji w projektowaniu stron internetowych. Przedstawię kilka prostych wskazówek, których możesz użyć, aby poprawić nawigację i użyteczność witryny. Pojawią się również przykłady efektywnych menu nawigacyjnych, które pozwolą Ci zorientować się, jak zaplanować następny projekt.
Architektura informacji
Planowanie nawigacji powinno zaczynać się od architektury informacji. Ważne jest, aby usiąść i burza mózgów na temat architektury informacji na stronie internetowej. Musisz dowiedzieć się, jakie funkcje oferuje strona internetowa, co jest najważniejsze i co można umieścić na niższych poziomach w hierarchii informacji.
Architektura informacji obejmuje funkcje, potrzeby użytkowników, mapa witryny, testy i makiety. Więcej informacji na temat architektury informacji można znaleźć w artykule Camerona Chapmana w Information Architecture 101: Techniki i najlepsze praktyki.
Korzystanie z technologii obsługiwanych przez użytkowników
Unikaj korzystania z Flasha, JavaScript, jQuery lub czegokolwiek innego, co może uniemożliwić dostęp do nawigacji w Twojej witrynie podczas budowania paska nawigacyjnego, lub przynajmniej upewnij się, że są w stanie z wdziękiem ulec degradacji.
Więcej informacji na temat wdzięczna degradacja javascript, sprawdź ten post na 10 przydatnych metodach wycofywania kodu CSS i Javascript.
Używaj prostych, przyjaznych dla użytkownika warunków
Lepiej jest użyć proste, oczywiste i łatwe do zrozumienia terminy niż trzymać się tylko warunków branżowych dla twojego menu nawigacyjnego. Wszelkie linki, które zabierają użytkownikom więcej niż sekundę lub dwie, aby się zorientować, prawdopodobnie nie nadają się do użycia.
Jeśli użytkownik musi kliknąć link, aby dowiedzieć się, do czego prowadzi ten link, przyczyni się to do złej obsługi użytkowników przez użytkowników.
Przykłady
Terminy w menu nawigacyjnym strony Larissy Ness są łatwe do zrozumienia i wystarczające. Użytkownicy nie uznają tego za mylące, ponieważ mają już doświadczenie z takimi menu.
Oto kolejny dobry przykład czystego i przejrzystego menu nawigacji na stronie internetowej, w którym używane są często używane terminy.
Agencja kreatywna Eighty8 Cztery używa terminu „salon wystawowy”, który może być mylący dla odwiedzających. Termin ten może oznaczać portfolio lub pracę, ale nie jest jasne, a odwiedzający nie mają innego wyboru, jak kliknąć, aby to sprawdzić.
Standaryzuj projekt nawigacji
Użyj tego samego modelu nawigacji na wszystkich twoich stronach. Jest to bardzo ważne, ponieważ bez spójnego projektu użytkownik może myśleć, że znajduje się w innej witrynie. Upewnij się, że używasz tego samego modelu nawigacyjnego, aby użytkownicy mogli łatwo przejść do witryny bez utraty.
Bluegg, poniżej pokazano prosty i czysty projekt nawigacji, który pozostaje taki sam na wszystkich podstronach. Jedyną różnicą jest wskaźnik koloru, który pokazuje stronę, w której aktualnie przebywa użytkownik.
Wskaż, gdzie jesteś
Ważne jest, aby użytkownik zawsze wiedział, gdzie się znajduje. Możesz to zrobić przez zmiana tła łącza, kolor nazwy strony lub obróć tekst pogrubiony w menu nawigacyjnym, aby odróżnić je od innych.
Austin Eastciders używa innego koloru i tła, aby wskazać stronę, na której znajduje się użytkownik. Ten wskaźnik może również działać jako subtelna zmiana projektu, na przykład za pomocą a różne tło nawigacji co stwarza wrażenie, że inne elementy menu są dogłębne.
Chirurgia medialna używa ciemniejszego koloru jako wskaźnika otwartej podstrony. Proste ale efektywne.
Użyj konwencji internetowych
Chodzi o łatwą w obsłudze i intuicyjną nawigację po stronie. Konwencje internetowe znacznie ułatwiają projektantom obejście ich projektów. Większość użytkowników kliknie logo witryny, aby wrócić do strony głównej, więc zaprojektuj swoje logo, aby to zrobić.
Jeśli nie, zmuszasz ich do spędzenia czasu na nauczenie się czegoś nowego lub w niektórych przypadkach przeszkadza im, nie dostarczając tego, co według nich jest powszechnie akceptowanymi normami nawigacyjnymi.
Możesz dowiedzieć się więcej o konwencjach internetowych tutaj:
- 10 konwencji Web Design
- Nie odkrywaj na nowo koła Web Design
- Projektowanie z konwencjami internetowymi
Projekt wstrzykiwania umieszcza logo w lewym górnym rogu, który pasuje do jednej z najczęściej używanych konwencji internetowych.
Adams Creation korzysta z jednej z najpopularniejszych konwencji internetowych - logo znajduje się w lewym górnym rogu strony internetowej i prowadzi do strony głównej.
Przetestuj: zaangażuj stronę trzecią
Zawsze testuj swój projekt nawigacji z każdą osobą, która wcześniej korzystała z Internetu. Możesz przetestować go, jeśli nie chcesz mieć ludzi, którzy nie byli związani z procesem projektowania. Obserwuj ich preferencje podczas nawigacji za pośrednictwem witryny i przeanalizuj czas potrzebny na znalezienie stron, dla których wyglądały.
Dla lepszej dokładności, angażuj więcej osób, zbieraj dane, analizuj je i podsumowuj dla lepszego dopasowania. Wykonaj ankietę po teście, jeśli jest to konieczne. Możesz uzyskać nieoczekiwane pomysły i dane wejściowe, które w przeciwnym razie nie zostaną wykryte bez tego testu.
Podaj kontekst
Aby zachować spójność z treścią i nawigacją, zapewnij użytkownikom witryny, aby szybko znaleźli rzeczy, których potrzebują szybko. Możesz umieścić małe ikony związane z treścią, do której prowadzi link, lub krótkie opisy, aby pokazać, na czym polega strona.
Mój własny rower używa prostych ikon, aby dać użytkownikom więcej informacji o tym, co mogą znaleźć w określonej podstronie.
Sarah Parmenter używa krótkich i ładnych napisów pod główną nawigacją, aby podać informacje o podstronach, do których prowadzi główna nawigacja.
Cele SEO
Google lubi spójną nawigację. Dobrze jest mieć spójną nawigację nie tylko dla użytkowników, którzy rozumieją i rozumieją, jak poruszać się po witrynie, ale także dla wyszukiwarek do indeksowania Twojej witryny.
Roboty wyszukiwarek przemierzają Twoją witrynę w celu indeksowania Twojej witryny i umieszczania linków na stronie wyników wyszukiwania. Jeśli chcesz być widoczny, zwróć uwagę na dobry projekt nawigacji i zwiększ ruch.
Darmowe skrypty nawigacyjne (CSS i jQuery)
Oto krótka lista najnowszych menu nawigacyjnych, które mogą okazać się przydatne w projektach. Skrypty te sprawią, że użytkownik produktu będzie jeszcze lepszy dzięki dodaniu kilku ciekawych funkcji i ułatwieniu korzystania.
Sterowany przez XML skrypt Scroller z nowymi funkcjami HTML i jQuery: vScroller
Filtrify
Page Scroller
Portfolio osi czasu
HorizontalNav
CSS3 Minimalistyczne menu nawigacyjne
Efekt nawigacji po okręgu z CSS3
Efekty nawigacyjne siatki z jQuery
Ascensor
Utwórz eleganckie menu nawigacyjne CSS3
Prezentacja pięknej nawigacji poziomej
I wreszcie kilka inspirujących poziomych menu nawigacyjnych. Sprawdź te niesamowite strony internetowe i ich rozwiązania menu nawigacyjnego, aby znaleźć nowe pomysły na swoje projekty.
Ch3mical
Bloom Search Marketing Inc.
Alex Perez
Libor Zezulka
Hauska!
Złote Wyspy
Neil Carpenter
Marc Thomas
Polistyren 3D
Liechtenecker
Świat Przygód
Fotografia Arbutus
OMDRL
4 Pines Beer
Łowcy Wina
Mam nadzieję, że ten artykuł okaże się przydatny i pouczający. Jeśli masz jakieś myśli lub nie zgadzasz się, podziel się swoją opinią w sekcji komentarzy.
