Wzorce nawigacyjne dla dziesięciu popularnych typów witryn internetowych
Nawigacja jest jednym z najważniejszych aspektów każdej witryny. Bez dobrej nawigacji strona staje się bezużyteczna dla odwiedzających. Nie mogą znaleźć potrzebnych informacji, a następnie wyszukiwać konkurencyjnych witryn. Ważne jest, aby Twoje witryny były łatwe w nawigacji, jeśli chcesz odnieść sukces jako projektant.
iBut nie ma uniwersalnych rozwiązań nawigacyjnych. To, co działa dobrze na stronie z wiadomościami, może nie działać dobrze na osobistej stronie. Coś, co jest niewiarygodnie przyjazne dla użytkownika na blogu, może być frustrujące w witrynie e-commerce.
Poniżej znajduje się dziesięć popularnych typów witryn z sugestiami dotyczącymi rodzajów wzorców nawigacyjnych, które sprawdzają się w każdym z nich.
Są też przykłady, które dają lepsze wyobrażenie o tym, o czym mówimy. Zapraszam do dzielenia się wspaniałymi przykładami w komentarzach!
Wszystkie witryny
Istnieją pewne wzorce nawigacji, które działają na praktycznie wszystkich stronach. Zamiast ponownego mieszania tych samych informacji w każdej z kategorii poniżej, po prostu uwzględnię je tutaj.
Pierwszy wzorzec to nawigacja z zakładkami. Tabulatory doskonale nadają się do nawigacji, ponieważ przypominają psychologicznie odwiedzającym papierowe karty i przechodzą do nowej sekcji notatnika lub spinacza, czego nie robią przyciski lub zwykłe linki tekstowe. Karty są prawie zawsze preferowaną metodą stylizacji głównych linków nawigacyjnych, chociaż oczywiście działają najlepiej, gdy w menu jest ograniczona liczba linków.
Drugi wzór to nawigacja nagłówka. Jeśli twoja witryna ma nagłówek (i większość stron to robi), nawigacja w nagłówku to dobry pomysł. Odwiedzający są przyzwyczajeni do przeglądania nagłówków odnośników nawigacyjnych. To z góry ustalone zachowanie ułatwia uczynienie witryny bardziej przyjazną dla użytkownika, umieszczając nawigację w nagłówku lub w jego pobliżu.
Ostateczny wzór, który dotyczy praktycznie wszystkich stron, to nawigacja po stopce. Wielu użytkowników (choć nie wszyscy) spojrzy na stopkę linku, jeśli nie znajdzie tego, czego szuka w Twojej drugiej nawigacji. Wiele podstawowych stron jest często łączonych ze stopką, w tym z linkami "o", "kontaktach" i "mapą witryny", niezależnie od tego, czy są połączone w innych miejscach w nawigacji, czy nie.
1. Blogi
Blogi mają na ogół dużą zawartość, w kolejności odwrotnej chronologicznej. Stanowi to zarówno logiczne ramy dla twojej nawigacji, jak i pewne wyjątkowe wyzwania, w zależności od typu bloga.
Większość blogów wykorzystuje połączenie paginacji (lub ciągłego przewijania), stronę archiwum, nawigację po pasku bocznym dla kategorii i / lub znaczników oraz ewentualnie nawigację nagłówka i stopki. Ważne jest, aby dokładnie przemyśleć, w jaki sposób użytkownicy mogą chcieć uzyskać dostęp do treści na swoim blogu.
Na przykład osobisty blog może nie wymagać nawigacji kategorii lub tagu poza linkami w metadanych dla każdego posta. W takich przypadkach użytkownicy powinni uzyskiwać dostęp do treści w odwrotnej kolejności chronologicznej, a nie przeskakiwać według tematów. Z drugiej strony blog tematyczny musi mieć nawigację kategorii i znaczników, ponieważ użytkownicy prawdopodobnie szukają informacji na określone tematy w ramach całego tematu.
W minimalnym zakresie blogi powinny zawierać nawigację chronologicznie poruszającą się między treściami (paginacja, następne / poprzednie linki lub ciągłe przewijanie), a także nawigację nagłówka lub paska bocznego dla określonych stron poza główną stroną bloga.
Blogi tematyczne (a czasem korporacyjne) powinny również zawierać menu kategorii lub znaczników w nawigacji, w nagłówku lub na pasku bocznym. Szczególnie duże blogi powinny również rozważyć wdrożenie funkcji wyszukiwania, aby ułatwić użytkownikom szybkie znalezienie dokładnie tego, czego szukają. Po prostu upewnij się, że funkcja wyszukiwania działa zgodnie z przeznaczeniem i naprawdę wyświetla wszystkie istotne wyniki.
Ecoki poniżej zawiera kategorie najwyższego poziomu w nawigacji w nagłówku, z nawigacją do ważnych stron w dodatkowym pasku nawigacyjnym nagłówka. To skuteczny układ, który wyraźnie kładzie nacisk na najczęściej używane linki.
2. Witryny z wiadomościami
Witryny z wiadomościami są podobne do blogów, ponieważ generalnie przedstawiają historie w kolejności odwrotnej chronologicznej. Witryny z wiadomościami są często bardzo skategoryzowane i mają bardziej złożoną architekturę informacji niż wiele innych rodzajów witryn. Z tego powodu ich wzorce nawigacji są często bardziej złożone.
Kluczem nie jest to, aby nawigacja była bardziej skomplikowana, niż powinna. Menu rozwijane i wyskakujące to dobry sposób na radzenie sobie z większymi menu bez zaśmiecania strony. Jeśli spojrzysz na większe witryny z wiadomościami (np. Google News, na przykład poniżej), podzielą one wiadomości na kategorie takie jak polityka, lokalna, światowa, sportowa, rozrywkowa itp. Które kategorie będziesz używać, zależy od tego, czy strona to ogólna witryna z wiadomościami lub aktualna strona z wiadomościami.
Znaczniki mogą również znacząco poprawić nawigację. Oznaczając każdą historię, użytkownicy mogą łatwo znaleźć powiązane historie, bez tworzenia skomplikowanej lub nadęty struktury kategorii. Dobrym pomysłem jest nie tylko dołączanie linków do tagów w każdym artykule, ale także dołączanie listy tagów lub chmury tagów (tylko popularne tagi mogą być dobrym pomysłem dla witryn z setkami tagów).
Łączenie wbudowane w artykuły znacznie ułatwia pracę użytkownikom. Wiele dużych serwisów informacyjnych robi to, umożliwiając użytkownikom natychmiastowy dostęp do wszystkich artykułów na dany temat. Jest bardzo podobny do włączania tagów, ale zamiast listy na początku lub końcu artykułu, linki znajdują się w samym tekście.
3. Witryny e-commerce
Strony e-commerce są czasami niezwykle skomplikowane i zawierają setki (lub tysiące) poszczególnych stron produktów i innych informacji. Z tego powodu sposób obsługi nawigacji jest niezbędny zarówno dla użytkownika, jak i dla użytkownika końcowego. Bez doskonałej struktury nawigacji odwiedzający witrynę e-commerce będą mieli trudniejsze znalezienie produktów, których szukają, co oznacza, że będą mieli szansę uniknąć frustracji.
Najważniejsze, że każda witryna e-commerce z kilkoma potrzebami to dobry system wyszukiwania. Wyszukiwanie wspomagane jest kluczowe, gdy użytkownicy mogą nie tylko wyszukiwać według słów kluczowych, ale także zawężać wyniki na podstawie takich czynników, jak cena, rozmiar, kategoria lub inne dane (w zależności od konkretnych produktów).
Nawigacja kategorii jest również koniecznością dla użytkowników, którzy chcą przeglądać. W zależności od tego, czy korzystasz z podkategorii, dobrym pomysłem może być również nawigacja po menu nawigacyjnym (jeśli twoja witryna ma więcej niż dwa lub trzy poziomy głębokości, to poprawi użyteczność bułki tartej).
Zapewnienie odwiedzającym wielu sposobów znajdowania pożądanych produktów to świetny sposób na zwiększenie sprzedaży, ale upewnij się, że każda metoda pokazuje wszystkie odpowiednie produkty. Jeśli odwiedzający odkryją, że wyszukiwanie zwraca jeden zestaw produktów, podczas gdy przeglądanie zwraca inny zestaw, doprowadzi to tylko do frustracji.
The Blik Witryna poniżej jest doskonałym przykładem witryny, która używa paska bocznego z filtrami, aby zawęzić wyniki produktów. Jest to wzorzec wyszukiwania z przewodnikiem, bez wyglądu wyszukiwania.
4. Strony informacyjne i informacyjne
Strony referencyjne mają na ogół jedną wspólną cechę: mnóstwo informacji na wielu stronach. To sprawia, że trudno jest stworzyć dowolne standardowe menu. Kategorie mogą być pomocne przy przeglądaniu stron, ale kiedy zaczynasz przechodzić do punktu, w którym masz tysiące, dziesiątki tysięcy, a nawet miliony stron (np. Wikipedia), system kategorii ulega rozpadowi. Co więcej, większość ludzi odwiedza strony internetowe w określonym celu, a nie przegląda, a kategorie nie są szczególnie pomocne.
Ważne jest, aby witryny referencyjne miały doskonałe możliwości wyszukiwania. Wyszukiwanie kierowane, podobnie jak te stosowane w witrynach handlu elektronicznego, może być przydatne, zwłaszcza jeśli używane są w połączeniu z dobrą organizacją tagowania i kategorii.
To oczywiste Reference.com poniżej, chce, aby użytkownicy używali wyszukiwania, aby znaleźć to, czego szukają, ponieważ jest umieszczony w widocznym miejscu u góry ekranu.
Strony w witrynie referencyjnej powinny również korzystać z linku do powiązanych informacji. Dzięki temu odwiedzający mogą łatwo znaleźć wszystkie potrzebne materiały, aby zrozumieć, co czytają, bez konieczności wykonywania wielu wyszukiwań. Konieczność tworzenia linków inline powoduje, że platformy wiki mają zazwyczaj standardową składnię do linkowania w tekście artykułu, dzięki czemu twórcy treści nie muszą poświęcać czasu na wyszukiwanie odpowiednich linków.
Wikipedia poniżej i inne witryny wiki dobrze wykorzystują linkowanie w celu dodania kontekstu do artykułów.
5. Witryny korporacyjne
Istnieje ogromna różnorodność w strukturze i wielkości witryn korporacyjnych. Niektóre mają po prostu zachęcić nowych klientów. Inne są tworzone w celu informowania aktualnych klientów. Jeszcze inne muszą służyć zarówno jako zachęta dla nowych klientów, portal informacyjny dla obecnych klientów, jak i front-end dla firmowego intranetu.
Bez względu na cel witryny korporacyjnej kluczowa jest przejrzysta nawigacja. Nie chcesz, aby użytkownicy spędzali czas szukając nawigacji lub próbując dowiedzieć się, który link kliknąć, aby dotrzeć tam, gdzie trzeba. Upewnij się, że linki są ułożone logicznie, że każdy ma łatwe do zrozumienia znaczenie i że znajdują się w logicznych miejscach (nagłówek i pasek boczny to twoi przyjaciele).
Wszystkie poniższe witryny pokazują, że tylko dlatego, że nawigacja znajduje się w najczęstszych miejscach, nie oznacza, że nie może być kreatywna. Dopóki jest to możliwe do zastosowania i łatwe do znalezienia, możesz stworzyć coś wyjątkowego.
W witrynach większych niż kilkanaście stron dobrym pomysłem jest włączenie funkcji wyszukiwania. Warto również dodać mapę witryny, aby ułatwić użytkownikom, którzy mają problem z Twoją regularną nawigacją, znalezienie dokładnie tego, czego szukają.
6. Witryny społecznościowe lub społecznościowe
Zasadniczo w przypadku dużych portali społecznościowych wyszukiwanie jest podstawowym sposobem nawigacji. Ma to sens, gdy na stronie są miliony (lub nawet miliardy) stron. Standardowa nawigacja oparta na menu nie ma większego sensu, gdy mamy do czynienia z tą ilością informacji.
Więc wyszukiwanie dba o ogólną nawigację w witrynie. Ale nadal pozostawia strony profilu użytkownika. Ważne jest, aby w całej witrynie była spójność. Niezależnie od tego, czy witryna umożliwia członkom dostosowywanie ich profili, czy nie, konieczne jest umieszczenie linków w tym samym miejscu na każdej stronie.
Weźmy na przykład Facebooka: każdy profil członka i każda strona zawiera linki do takich rzeczy jak zdjęcia i informacje po lewej stronie. Powiadomienia, wiadomości i prośby o dodanie do znajomych są zawsze połączone u góry, podobnie jak linki do ustawień konta i wylogowanie. Standardowy górny pasek nawigacji, który zawsze łączy się z kontem gościa i informacjami, stał się podstawą dobrze zaprojektowanych sieci społecznościowych.
Linki wewnętrzne powinny być również spójne. Na przykład za każdym razem, gdy nazwa użytkownika pojawia się jako link, powinna ona łączyć się z profilem tego użytkownika, niezależnie od zawartości, z którą jest powiązany. Zastanów się, które informacje powinny logicznie łączyć się z wybranymi stronami, a następnie upewnij się, że jest spójny niezależnie od miejsca, w którym pojawiają się te linki.
7. Strony zdarzeń
Witryny zdarzeń są generalnie proste i nie mają dużej liczby stron. Ale ważne jest, aby zastanowić się, w jaki sposób użytkownicy będą korzystać z witryny. Najprawdopodobniej będą chcieli wykonać jedną z następujących czynności: zapisz się na wydarzenie, zobacz, kto uczestniczy lub rozmawia, uzyskaj informacje o uczestnictwie (w tym koszty i rzeczy takie jak lokalizacja i hotele w okolicy) i zobacz harmonogram wydarzenia.
Zgłoszenie się na wydarzenie, nawet jeśli jest to bezpłatne wydarzenie, powinno być traktowane jako transakcja e-commerce. Z tego powodu chcesz mieć widoczny przycisk wezwania do działania w celu rejestracji.
Standardowy nagłówek i / lub nawigacja po pasku bocznym to doskonały wybór dla linków do innych stron. Lokalna nawigacja może być również niezbędna, jeśli masz zamiar uwzględnić poszczególne strony dla konkretnych warsztatów lub głośników. Menu rozwijane lub rozwijane mogą działać w tym przypadku tylko wtedy, gdy masz ograniczoną liczbę sub-linków. W przeciwnym razie lepiej użyć pod-nawigacji na pasku bocznym lub na stronie głównej.
The Hull Digital Live 10 witryna zawiera zwięzłą, łatwą w użyciu nawigację nagłówków, która ułatwia znalezienie dokładnie tego, czego może szukać użytkownik.
Wskazówka: jeśli witryna wydarzenia będzie zawierała obszar uczestników lub intranet, zapoznaj się z sugestiami dotyczącymi nawigacji w sieci społecznościowej lub witrynie społeczności w celu uzyskania wskazówek nawigacyjnych.
8. Przegląd witryn
Strony z recenzjami są zazwyczaj używane na dwa sposoby. Po pierwsze, gdy użytkownicy są zainteresowani konkretnym produktem i chcą zobaczyć recenzje tego produktu. W tym przypadku najlepsza nawigacja to doskonała funkcja wyszukiwania. Pozwala użytkownikom na szybki dostęp do dokładnie tego produktu, którego szukają.
Drugim zastosowaniem jest badanie niektórych rodzajów produktów. W tym celu wyszukiwanie nadal stanowi cenną metodę nawigacji. Ale kategorie i wyszukiwanie z przewodnikiem są równie ważne. Umożliwienie użytkownikom przeglądania opinii według kategorii i podkategorii pozwala im znaleźć różnorodne produkty, które odpowiadają ich potrzebom. Dalsze pozwolenie na zawężenie tych wyników w oparciu o takie rzeczy, jak cena lub marka, zapewnia jeszcze lepsze wrażenia użytkownika.
Blippr poniżej zawiera zarówno nawigację kategorii (z rozwijanymi pod-nawigacjami), jak i prominentny pasek wyszukiwania.
9. Strony prywatne
Prywatne strony to naprawdę dzikie karty świata projektowania stron internetowych. Możesz użyć praktycznie dowolnego rodzaju wzoru nawigacyjnego, który chcesz. Główne pozycje, takie jak nagłówek i nawigacja po pasku bocznym, nadal będą najbardziej użyteczne, ale nie ma nic złego w robieniu czegoś zupełnie innego.
Witryny osobiste powinny być odzwierciedleniem właściciela witryny. Jeśli coś nieoczekiwanego pasuje do osobowości witryny, to wszelkimi sposobami: idź do tego. Mimo to dobrym pomysłem może być dołączenie do niej linku do mapy witryny, jeśli korzystasz z niestandardowej nawigacji, aby ułatwić odwiedzającym, którzy "nie dostają", aby znaleźć to, czego szukają.
Daniel Mall's strona portfolio ma jeden z najbardziej unikalnych wzorców nawigacyjnych, jakie widziałem. Jest łatwy w użyciu, a jednocześnie bardzo różni się od normy.
10. Galerie
Galerie zdjęć witryny z portfolio powinny generalnie korzystać z kombinacji standardowej nawigacji nagłówkowej lub bocznej, tagowania i kategorii. Umożliwienie użytkownikom zawężenia wyświetlanych obrazów w oparciu o znacznik lub kategorię jest ważne dla wygody użytkownika, zwłaszcza gdy rośnie liczba obrazów.
Paginacja będzie również istotna dla większych witryn. Ciągłe przewijanie może wydawać się dobrym pomysłem, ale ponieważ galerie i portale z natury są wypełnione mediami, ciągłe przewijanie może skończyć się wykorzystaniem wielu zasobów systemowych. Odradzam go za dowolną witrynę zawierającą więcej niż kilkadziesiąt zdjęć (choć na mniejszych stronach galerii i portali może to być naprawdę miłe akcentowanie).
Minimalny eksponat używa kategorii, wyszukiwania i stronicowania.
Na wynos
Jeśli istnieje jedna koncepcja nawigacji, która jest absolutną koniecznością, niezależnie od rodzaju projektowanej strony, to jest to: spójność!
Możesz uciec z większością logicznych opcji nawigacji, o ile jest spójny w całej witrynie. Nie zaczynaj z nawigacją po pasku bocznym dla połowy witryny i nawigacją nagłówkową dla drugiej połowy bez logicznego powodu. Jeśli link do strony głównej znajduje się zawsze w lewym górnym rogu, upewnij się, że pozostaje w lewym górnym rogu. Odnosi się to do każdego elementu nawigacji i staje się coraz ważniejsze w miarę wzrostu rozmiaru witryny.
Poza konsystencją, najważniejszą rzeczą do zrobienia podczas projektowania wzorców nawigacji jest zastanowienie się, w jaki sposób użytkownicy będą korzystać z Twojej witryny. Nie bój się A / B lub testów na wielu odmianach, aby dowiedzieć się, czy Twoje wzorce nawigacji działają tak, jak powinny.
Niezależnie od tego, jak fajna lub nowa jest twoja nawigacja, jeśli nie działa ona jako podstawowa funkcja pozwalająca odwiedzającym przenosić się z jednego obszaru witryny do drugiego w sposób, w jaki chce, nawigacja nie powiodła się.
Zapraszam do dzielenia się przykładami świetnych wzorców nawigacyjnych w akcji w komentarzach poniżej! Daj nam też znać, jeśli masz jakieś inne wskazówki dotyczące odpowiednich wzorców nawigacji dla konkretnych typów witryn.