Essential Navigation Patterns w 2016 roku
Twoje menu nawigacyjne tworzy lub załamuje UX twojej witryny, za co zawsze powinieneś przede wszystkim projektować. Nie ma lepszej usługi, którą moglibyście zapewnić swoim klientom jako projektantowi, niż zapewnienie, że witryny, które dla nich zbudujesz, oferują oszałamiającą i wysoce funkcjonalną obsługę.
Znakomity UX gwarantuje, że witryny Twoich klientów zdobędą więcej potencjalnych klientów, odwiedzających i czytelników, nie wspominając już o regularnych odwiedzinach. Jest to najważniejsza część tworzenia witryny i masz nad nią dużą kontrolę na podstawie tego, jak projektujesz menu nawigacyjne swojej witryny.
Niestety, nie wszyscy projektanci przykładają dużą wagę do projektowania w celu doskonałej nawigacji, co stanowi nieszczęście dla klientów i odwiedzających.
Aby stworzyć wiarygodną reputację projektanta i być projektantem na żądanie, musisz opanować jeden z najbardziej podstawowych aspektów projektowania stron internetowych. Stwarza to doskonałą nawigację dla stron Twoich klientów.
Oto jak.
Lepsza nawigacja
Lepsza nawigacja jest niezbędnym elementem nawigacji, ponieważ umożliwia użytkownikom natychmiastowy dostęp do menu i łatwe znajdowanie tego, czego chcą w Twojej witrynie. Lepsza nawigacja pozostaje zablokowana, gdy użytkownicy przewijają stronę. Nie ma nic bardziej frustrującego - szczególnie w przypadku długich przewijanych stron - niż ponowne przewinięcie w górę, aby przejść do innej strony w witrynie.
Pamiętaj, że w Internecie szybkość to wszystko (ładowanie stron, znajdowanie pożądanej zawartości itp.), Więc szybsze uzyskiwanie dostępu do menu nawigacji jest najlepszą praktyką.
Dzięki umieszczeniu przyklejonego paska nawigacji pomagasz także zmniejszyć obciążenie kognitywne użytkowników, stale ustawiając ich opcje nawigacyjne tuż przed nimi.
Alternatywna prasa to dobry przykład tego, jak włączyć lepszą nawigację do swoich stron. Zwróć uwagę, że wszystkie najważniejsze sekcje są łatwo dostępne i możliwe do zidentyfikowania dzięki skutecznemu kontrastowi kolorów na pasku nawigacji, niezależnie od tego, jak daleko przewiniesz stronę.
Oczywisty hipertekst
Hipertekst to dowolne odniesienie tekstowe na twoich stronach, które użytkownicy mogą kliknąć, aby uzyskać dodatkowe informacje, zwykle na innej stronie, niezależnie od tego, czy jest to witryna w tym samym miejscu, czy poza nią. Hiperłącza są prawdopodobnie najbardziej rozpoznawalnym przykładem hipertekstu.
Ponieważ hipertekst zawiera informacje, które pomogą użytkownikowi uzyskać więcej informacji, jest oczywiste, że takie przydatne odniesienia są bardzo widoczne. Ogólnie rzecz biorąc, zwiększa to łatwość nawigacji w witrynie, którą tworzysz.
Zalecam rażenie hipertekstem za pomocą dwóch, prostych, designerskich funkcji:
- Podkreślanie
- Zmiana koloru
Gdy podkreślisz dowolne słowo na swojej stronie - powiedzmy, że jest to hiperlink do strony o kliencie - natychmiast zwraca uwagę odwiedzających witrynę, co ułatwia im nawigację do ważnych informacji z większą łatwością.
Podobnie, gdy kolor hiperłączy różni się od tekstu i tła stron, ponownie wyróżnij go na stronie, aby użytkownicy mogli łatwo go zidentyfikować i kliknąć.
Strona marketingowa Codzienne jajko do hipertekstu używa zarówno podkreślenia, jak i różnych kolorów, co ułatwia użytkownikom identyfikowanie linków.
Mega menu
Mega menu to świetny pomysł na nawigację, zwłaszcza jeśli strona, którą projektujesz dla swojego klienta, zawiera wiele treści i kategorii. Sklepy eCommerce przychodzą na myśl. Są to zasadniczo ogromne, rozwijane panele, które otwierają dodatkowe warstwy nawigacji, aby pomóc użytkownikom znaleźć dokładnie to, czego chcą szybciej.
Takie menu polepszają wrażenia użytkownika dzięki takim korzyściom jak:
- eliminacja przewijania;
- podpowiedzi;
- uporządkowane porządkowanie treści ikonami, układem lub typografią.
Wszystkie te funkcje ułatwiają korzystanie z menu nawigacyjnego.
Dla solidnego przykładu mega menu, przejdź do Food Network Strona. Zwróć uwagę, że w menu wysuwanym wyświetlana jest jedna z najbardziej popularnych treści witryny - przepisy - w łatwym do wyświetlenia formacie, który pozwala użytkownikom od razu wybrać miejsce docelowe zamiast przewijania lub paginacji, aby uzyskać więcej opcji.
Availances wzorca i języka
Aerencja wzoru wykorzystuje konwencjonalny symbol, który większość użytkowników witryny natychmiast zrozumie, np. Ikona domu reprezentująca stronę główną Twojej witryny. Agodność językowa to wyraźne użycie słowa, np. "Dom", w celu wyjaśnienia, że kliknięcie tej zakładki spowoduje przeniesienie użytkowników na stronę główną witryny.
Affordances informują użytkowników, w jaki sposób mogą wchodzić w interakcję z elementami projektu. Chociaż jest to z pewnością Design Basics 101, nadal jest tak samo ważne, jak dzisiaj, tak jak to było w początkach Internetu.
Funkcjonalne menu nawigacyjne powinno mieć symbol domu lub słowo "dom" umieszczone na pierwszej karcie nawigacji po lewej stronie. Chociaż niektórzy projektanci mogą zamiast tego optować za logo firmy jako ikoną lub przyciskiem "domowym", to nadal pozostawia zbyt wiele miejsca na błąd użytkownika.
eTailer Magazyn ramowy demonstruje tę zasadę projektowania dla tee, z wykorzystaniem "domu", aby nie pozostawiać wątpliwości, gdzie ta zakładka będzie odwiedzać witrynę.
Szybki czas ładowania
Szybkość = świetny komfort użytkowania. Projektanci wszystkich pasków powinni to zanotować jako jedną z najważniejszych zasad projektowania, których po prostu nie można i nie należy usuwać. Według Wired Magazine prawie 50% kupujących chce, aby średnia strona ładowała się w dwie sekundy lub krócej! Innymi słowy, jeśli strony, które zaprojektujesz dla swoich klientów, trwają dłużej niż dwie sekundy, to ładowanie ... istnieje naprawdę duża szansa, że opuszczą witryny Twoich klientów i nigdy nie wrócą, powodując poważne koszmary konwersji.
Na pewno jest to niepokojąca statystka, ale jest coś, co mogą zrobić projektanci, aby zapewnić swoim klientom wysoką wydajność strony. Po prostu przetestuj szybkość stron projektowanych stron. Istnieje szereg niezawodnych narzędzi, które pomogą Ci określić czas wczytywania strony:
Przykładem bardzo szybkiego ładowania strony jest Enchanted Learning Co to jest wieloryb? strona. Projekt może wykorzystać trochę pracy, ale strona ładuje się w nieco ponad jedną sekundę, zgodnie z opcją narzędzi analitycznych Alexa.
Świetna nawigacja to świetny UX
Ogromną część satysfakcji użytkownika stanowi nawigacja witryny. Jest to podstawa, na której spoczywa całe doświadczenie użytkownika, jeśli naprawdę się nad tym zastanowić. Kiedy użytkownicy nie mogą z łatwością odnaleźć się na stronie twojego klienta, staje się to dla nich frustrujące, powodując, że opuszczają się oni w pośpiechu. Tak więc doskonała nawigacja powinna ułatwić ludziom korzystanie z dowolnej tworzonej strony; jest to punkt odniesienia dla wrażenia dobrego użytkownika.
Choć może to być kuszące, aby dać nawigację krótkiemu krokowi w fazie projektowania - z powodu pojawiania się nowych trendów w projektowaniu - nie jest to zalecane. Twoi klienci zauważą, podobnie jak Twoi klienci. Aby zadowolić klientów, musisz zadowolić ich użytkowników. Możesz to zrobić tylko wtedy, gdy projektujesz przede wszystkim dla doskonałych użytkowników, przy czym główny nacisk kładzie się na uzyskanie nawigacji od samego początku.